无限虚空之歌
2022-03-07 19:41
采纳率: 40%
浏览 22

初次搞webpack的postcss,结果一直报Unknown word

今天学到了postcss-loader,结果一用就如下图所示

img

由于跟的视频略古老,所以我用的webpack是4.46.0版本的,webpack-cli是4.9.2版本的,postcss-loader是4.3.0版本的
此外还用了css-loader、url-loader、file-loader、html-loade、html-webpack-plugin、mini-css-extract-plugin

这是我的webpack.config.js代码

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
    //从哪开始打包:当前目录下的src目录下的index.js
    entry:'./src/js/index.js',
    output:{
        //index.js打包完的名称:js目录下的bulit.js
        filename:'js/bulit.js',
        //项目文件打包完了输出到哪:当前目录(__dirname)下的bulid目录
        path:resolve(__dirname, 'bulid')
    },
    module:{
        rules:[
            //处理css的loader
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            //处理css兼容性
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        plugins: [
                            'postcss-preset-env'
                        ]
                    }
                }
            },
            //处理图片的loader
            {
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit:8 * 1024,
                    esModule:false,
                    name:'[hash:10].[ext]',
                    outputPath:'img'
                },
                
            },
            //给url-loader擦屁股的一个loader
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            //处理其他资源的loader
            {
                exclude:/\.(html|css|js|jpg|png|gif)$/,
                loader:'file-loader',
                options:{ 
                    outputPath:'media'
                }
            }
        ]
    },
    plugins:[
        //处理html的插件
        new HtmlWebpackPlugin({template:'./src/index.html'}),
        new MiniCssExtractPlugin({filename:'css/built.css'})
    ],
    //模式:生产模式
    mode:'production',
    //配置开发服务器
    devServer:{
        static: {
            //打包后项目目录
            directory: resolve(__dirname, 'bulid'),
          },
        //启动gzip压缩
        compress:true,
        //该开发服务器开在3000端口
        port:3000
    }
}

我这版本有点老,不知道有没有兄弟帮忙看看

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

相关推荐 更多相似问题