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

Question

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

由于跟的视频略古老，所以我用的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
    }
}

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

Answer 1

要不看看我的教程https://blog.csdn.net/qq_37284843/category_11654970.html?spm=1001.2014.3001.5482