Webpack CSS article

Private prefix postCSS-loader (style processing tool) autoprefixer(plug-in for private prefix)

npm install postcss-loader autoprefixer -D

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

//.browserslistrc
cover 99.5%
Copy the code

//webpack.config.js
{
    test:/\.css$/,
    use: ['style-loader', {loader: 'css-loader'.options: {
        	importLoaders: 2.// Use the following two loaders to parse}},'postcss-loader'.'less-loader']}Copy the code

The separation of 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.// Use the following two loaders to parse}},'postcss-loader'.'less-loader']]}}plugins: [
    new MiniCssExtractPlugin({
        filename: 'css/main.css'}})]Copy the code

Compress CSS

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

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

Once CSS compression is configured, JS compression is disabled

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()
        }
    }
}
Copy the code