webpack4.x CSS Compression

Webpack upgrade to 4.x after some of the previous configuration may not be very useful, has recently been studying the CSS out of the JS code and the CSS compression, so summarize the experience.

After Webpack4, for the extraction of CSS there is an officially recommended plug-in mini-css-extract-plugin, used to separate the CSS, and simple configuration,

Install first

NPM i-d Mini-css-extract-plugin

　　

{    test:/\.css$/, use    : [        minicssextractplugin.loader,        ' Style-loader ',    ],},

is not very simple and then in plugins Plus

plugins: [        new  minicssextractplugin ({            ' [name].[ Hash].css ',            ' [id].[ Hash].css ',        }),]    

OK, this time to carry out the package, you will find that the CSS has been drawn out, but the pull out of the CSS is not compressed, if you want to compress, but also need another plug-in

Installation

NPM i-d [email protected] Postcss-safe-parser Cssnano

Optimize-css-assets-webpack-plugin when upgrading to 5.0.0, there will be an error, safe was removed,

In other words, when you refer to the configuration of the official website, you will get an error
The solution given on GitHub is to change safe to parser

Const Optimizecssassetsplugin = require (' Optimize-css-assets-webpack-plugin ');p lugins: [    New Optimizecssassetsplugin ({            assetnameregexp:/index\.[ 0-9a-za-z]+\.css/g,  //need to write a regular match according to the file name you have packaged is my own            cssprocessor:require (' Cssnano '),            Cssprocessoroptions: {                discardcomments: {removeall:true},                parser:require (' Postcss-safe-parser '),                Autoprefixer:false            },            canprint:true        }),]

Now try packing, should be OK, if there is a problem, you can leave a message to me, slipped away

webpack4.x CSS Compression