Follow up with a Webpack 4.0 configuration record (1), continue to record learning Webpack configuration.

Defining environment variables

New webpack.defineplugin ({// to define the global environment variable DEV: json.stringify ('dev'),
    FLAG:'true'
}),
Copy the code

Webpack is simply optimized

  1. noParse
module:{
    noParse:'/jquery/'// Do not parse the package dependencies, such as jquery}Copy the code
  1. ignorePlugin
module:{
    noParse:'/jquery/'// Do not parse the set package dependencies rules:[{test:/\.js$/,
            exclude:/node_modules/,
            include:path.resolve('src'),
            use:{
                loader:'babel-loader',
                options:{
                    presets:[
                        '@babel/preset-env'.'@babel/preset-react'}}}]}Copy the code

Exclude and include certain modules. You can also use the ignorePlugin plugin that comes with WebPack to exclude certain packages and reduce the size.

new webpack.IgnorePlugin(/\.\/locale/,/moment/),
Copy the code

The above configuration ignores the language package in time formatting moment.js

let Happypack=require('happypack')... module.exports={ module:{ noParse:'/jquery/'// Do not parse the set package dependencies rules:[{test:/\.js$/,
                exclude:/node_modules/,
                include:path.resolve('src'),
                use:'Happypack/loader? id=js'
                // use:{
                //     loader:'babel-loader',
                //     options:{
                //         presets:[
                //             '@babel/preset-env', / /'@babel/preset-react'
                //         ]
                //     }
                // }
            }
        ]
    },
    plugins:[
        new Happypack({
            id:'js',
            use:[
                {
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env'.'@babel/preset-react']}}]})]}Copy the code
  1. These two optimizations are only available in production environments
  2. Pull out the common code
Module. exports={optimization:{splitChunks:{// cacheGroups:{// buffer group common:{chunks: {'initial'Vendor :{priority:1,// It is equivalent to the weight. The third party module is removed first. If this attribute is not set, the code block will be divided from top to bottom. The third party module cannot be removed.test:/node_modules/,
                    chunks:'initial', minSize:0,// the minimum value is 0 minChunks:2// the minimum value is 0 minChunks:2// the minimum value is}}}},}Copy the code
  1. Hot update of files
devServer:{
    hot:true}, plugins: [new webpack NamedModulesPlugin (), / / print update module path new webpack HotModuleReplacementPlugin () / / hot update]Copy the code

DllPlugin and DllReferencePlugin provide a way to split packages in a way that significantly improves build time performance. The idea is to build specific third-party NPM package modules in advance and then introduce them through pages. This not only makes vendor files much smaller, but also greatly improves the speed of components. Other gods on the Internet have a very detailed article, you can refer to the portal.

The above is some of their own learning webpackage 4.0 configuration process in some learning records, write out and share, if there is a mistake, but also hope to inform. Personal blog synchronous update, welcome to pay attention to exchange! Don’t forget to like it, thank you!