webpack配置postcss-loader报错

Question

我用的是webpack3.10.0的版本，配置webpack postcss-loader报错，慕课上视频是版本1
这是我的配置
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

const config = {

context: __dirname,
entry: './src/app.js',
output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'js/[name].bundle.js'
},
module: {
    loaders: [{
        test: '/\.js$/',
        loader: 'babel',
        query: {
            presets: ['latest']
        }
    }, {
        test: /\.css$/,
        loader: 'style-loader!css-loader!postcss-loader'
    }]
},
postcss: [
    require('autoprefixer')({
        browsers: ['last 5 versions']
    })
],
plugins: [
    new htmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        inject: 'body'
    })
]

}

module.exports = config;

报错如下图所示

Answer 1

请参考官方文档：https://webpack.js.org/loader...

Answer 2

webpack3的语法发生了变化，需要新建一个文件postcss.config.js，内容是

module.exports = {
    plugins: [
        require('postcss-import'), //需要安装 npm install postcss-import --save-dev,这句代码是会对一个js文件里面import进来的多个css放在同一个style里面，如果是多个文件引入就会生成多个
        require('autoprefixer')({
            broswers: ['>1%', 'last 5 versions', 'Firefox ESR', 'not ie < 9']
        })
    ]
}

然后webpack.config.js中配置loaders为

    {
            test: /\.css$/,
            //这里用数组方式或者loader字符串连接方式都可以
            use: [
                'style-loader',
                'css-loader?importLoaders=1', //对于css中@import进来的css同样做前缀处理
                'postcss-loader'
            ]
        }