鍍金池/ 問答/HTML/ webpack配置postcss-loader報(bào)錯

webpack配置postcss-loader報(bào)錯

我用的是webpack3.10.0的版本，配置webpack postcss-loader報(bào)錯，慕課上視頻是版本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;

報(bào)錯如下圖所示
圖片描述

回答
編輯回答
默念

webpack3的語法發(fā)生了變化，需要新建一個文件postcss.config.js，內(nèi)容是

module.exports = {
    plugins: [
        require('postcss-import'), //需要安裝 npm install postcss-import --save-dev,這句代碼是會對一個js文件里面import進(jìn)來的多個css放在同一個style里面，如果是多個文件引入就會生成多個
        require('autoprefixer')({
            broswers: ['>1%', 'last 5 versions', 'Firefox ESR', 'not ie < 9']
        })
    ]
}

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


    {
            test: /\.css$/,
            //這里用數(shù)組方式或者loader字符串連接方式都可以
            use: [
                'style-loader',
                'css-loader?importLoaders=1', //對于css中@import進(jìn)來的css同樣做前綴處理
                'postcss-loader'
            ]
        }
2018年2月23日 12:52
編輯回答
薄荷糖

請參考官方文檔：https://webpack.js.org/loader...

2018年4月19日 10:57