How webpack compresses files

In this section we learn how to compress webpack in 060f6ec055c1c4. In actual applications, in order to reduce the size of the packaged package, we may need to compress the CSS and JS files, which requires the use of different plug-ins webpack

Compress CSS

To compress CSS files in webpack , you need to use the optimize-css-assets-webpack-plugin plug-in. This plug-in will search for CSS during the build process of webpack

First we need to install this plug-in, the command is as follows:

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

After executing the command, you will find that the plug-in has been successfully added to the devDependencies dependency in package.json file.

This plugin can accept the following options when in use:

• assetNameRegExp : A regular expression indicating the name of the asset that should be optimized. The provided regular expression ExtractTextPlugin against the file name of the file exported by the 060f6ec055c2b3 instance in the configuration, not the file name of the source CSS file. The default is /\.css$/g .
• cssProcessor : CSS processor used to optimize CSS, the default is cssnano . This should be a cssnano.process interface (receives CSS and options parameters and returns a Promise).
• cssProcessorOptions : The options passed to cssProcessor , the default is {} .
• canPrint : A Boolean value indicating whether the plug-in can print messages to the console. The default is true .

Example:

Then we can webpack.config.js configuration file. Note that we mentioned it when we learned the plug-in before. The plug-in needs to be referenced require

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

module.exports = {
    entry: {
        entry:'./index.js',
    },
    output: {
        path:__dirname + '/dist',
        filename:'./bundle.js'
    },
    module:{
        rules:[
            {
                test:/.css$/,
                use:['style-loader','css-loader']
            }]
    },
    mode: 'production',
    plugins: [
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.optimize\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorPluginOptions: {
                preset: ['default', { discardComments: { removeAll: true },
                normalizeUnicode: false }],
            },
            canPrint: true
        })
    ]
}

Compress JS

If we want webpack , we can use uglifyjs-webpack-plugin plugin. uglifyjs-webpack-plugin plug-in is used to compress JS files, reduce the size of JS files, and speed up loading. Because this plug-in will slow down webpack , we generally close it during development and open it again during deployment.

When using this plug-in, you also need to install it first:

npm install uglifyjs-webpack-plugin --save-dev

uglifyjs-webpack-plugin plug-in are as follows:

• test : Test matching files, the default value is /\.js(\?.*)?$/i .
• include : The file to be included, the default value is undefined .
• exclude : The file to be excluded.
• cache : Enable file caching. When the JS has not changed, no compression.
• parallel : Whether to enable parallel compression.
• sourceMap : Whether to enable sourceMap .

Example:

uglifyjs-webpack-plugin plug-in is as follows:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  plugins: [
    new UglifyJsPlugin({
            test: /\.js(\?.*)?$/i,  //测试匹配文件,
            include: /\/index.js/,  //包含哪些文件
            excluce: /\/excludes/,  //不包含哪些文件
            chunkFilter: (chunk) => {
                // `vendor` 模块不压缩
                if (chunk.name === 'vendor') {
                  return false;
                }
                return true;
            },
            cache: true, 
            parallel: true, 
            sourceMap:  true
     })
  ]
}

Link: https://www.9xkd.com/