webpack4.x的css單獨打包、合並、自動添加前綴、壓縮

安裝

// 合並 css
npm install --save-dev mini-css-extract-plugin
// 壓縮 css
npm install --save-dev optimize-css-assets-webpack-plugin
// 添加前綴
npm install postcss-loader autoprefixer --save-dev

合並、壓縮、添加前綴

• 修改配置文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = {
    ...
    module:{
        rules:[
            {
                test: /\.css$/,
                use: [
                     // 替換 之前的style-loader
                     MiniCssExtractPlugin.loader,
                    'css-loader',
                    "postcss-loader"
                ]
            }
        ]
    },
    optimization: {
        minimizer: [new OptimizeCSSAssetsPlugin()]
    },
    plugins: [
        // 必不可少
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css'
        })
    ]
}

創建postcss.config文件

• 該文件 與package.json 同級

module.exports = {
    plugins: {
        'autoprefixer': {overrideBrowserslist: ['Android >= 4.0', 'iOS >= 8']}
    }
}

postcss.config文件注意點

• 我之前按照別人的一些配置，不是報錯、就是警告，上面那種配置是沒有報錯和警告的。如果有出現報錯、警告的情況，這幾種方式都試一下。

報錯

module.exports = {
    plugins: [
	require('autoprefixer')
    ]
}

警告

module.exports = {
    plugins: [
	'autoprefixer': {browsers: 'last 5 version'}
    ]
}