Before that, my main note was to explain the operation of webpack. Next, I will mainly record the optimization of webpack.

noParse

When we introduce a command such as JQimport jquery from jquery into index.js file to parse this sentence, we will enter the JQ file by default and continue parsing to see if there are other dependencies, but we know that JQ does not contain other dependencies, so we can configure parameters so that webpack does not parse JQ files. Is there any other dependency? In order to improve the packing speed.

module: {
    noParse: /jquery/,//Instead of parsing dependencies in jquery, if we know in advance that there are no other dependencies in the module, we can speed up packaging without parsing it.
    rules: [{
        test: /\.js$/,
        use: [{
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }]
    }]
},

include&&exclude

When we write rules in module, we can specify the directory to check, such as looking for js files only in src, and excluding node_modules.

rules: [{
    test: /\.js$/,
    use: [{
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }],
    exclude: /node_modules/,
    include: path.resolve('src')
}]

IgnorePlugin

We use moment to process time, but such a package contains language packages, which are available in all languages. When we pack it, it will cause unnecessary file size. So we should introduce it as needed, using Ignore Plugin, the plug-in of webpack.

-index.js

import jquery from 'jquery'
import moment from 'moment'

console.log('hello world');
//Setting Language
//locale is ignored in the config file and needs to be introduced on demand
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
let r = moment().startOf('hour').fromNow()
console.log(r);

plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './public/home.html'
    }),
    new webpack.IgnorePlugin(/\.\/locale/, /moment/)
    // If moment refers to locale, it will be ignored
],

Effect Show
Before neglecting:

After neglect:

Dynamic Link Library DllPlugin

We use react code to demonstrate the benefits of dynamic link libraries.
Introduce react,react-dom,@babel/preset-react

- index.js

import React from 'react'
import { render } from 'react-dom'

render( < h1 > jsx < /h1>,window.root);

- webpack.config.react.js
//Package react and react-dom separately

let path = require('path')
let webpack = require('webpack')
module.exports = {
    entry: {
        react: ['react', 'react-dom']
    },
    output: {
        filename: '_dll_[name].js',
        path: path.resolve(__dirname, 'out'),
        library: '_dll_[name]', //_ dll_react receives data returned from js files
        libraryTarget: 'var' // commonjs var this... mode
    },
    mode: 'development',
    plugins: [
        new webpack.DllPlugin({ //name == library
            name: '_dll_[name]', //Must have the same name as above. 
            path: path.resolve(__dirname, 'out', 'manifest.json') 
            //Task list
        })
    ]
}

- webpack.config.js
plugins: [
    new webpack.DllReferencePlugin({ //Quote
        manifest: path.resolve(__dirname, 'out', 'manifest.json')
            //When you look for it, go to the list first, and then pack it if you can't find it.
    })
],

After packaging, the size of index.js will be very small (because react, react-dom has been packaged separately, _dll_react.js), _dll_react.js as a dynamic link library, through manidest.json as a manifest file to find, if the manifest file is not packaged into JS