webpack css篇

私有前缀postcss-loader(样式处理工具) autoprefixer(私有前缀的插件)

npm install postcss-loader autoprefixer -D

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

//.browserslistrc
cover 99.5%

//webpack.config.js
{
    test:/\.css$/,
    use: ['style-loader',{
    	loader: 'css-loader',
        options: {
        	importLoaders: 2,//用后面的2个加载器来解析	
        }
    }，'postcss-loader','less-loader']
}

分离css

npm install --save-dev mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  module: {
    rules: [
        {
            test:/\.css$/,
            use: [{
                loader: MiniCssExtractPlugin.loader
            },{
                loader: 'css-loader',
                options: {
                    importLoaders: 2,//用后面的2个加载器来解析	
                }
            }，'postcss-loader','less-loader']
        }
    ]
  }
  plugins: [
    new MiniCssExtractPlugin({
        filename: 'css/main.css'
    })
  ]
}

压缩css

npm install --save-dev optimize-css-assets-webpack-plugin

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
	optimization: {
    	minimizer: {
        	new OptimizeCssAssetsPlugin()
        }
    }
}

一旦配置css的压缩，js的压缩就会失效

npm install terser-webpack-plugin

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
	optimization: {
    	minimizer: {
        	new OptimizeCssAssetsPlugin(),
            new TerserPlugin()
        }
    }
}