webpack4.0配置記錄（2）

接上一篇webpack4.0配置記錄(1),繼續記錄學習webpack配置。

定義環境變量

new Webpack.DefinePlugin({//用來定義全局環境變量
    DEV:JSON.stringify('dev'),
    FLAG:'true'
}),

webpack簡單優化

1. noParse

module:{
    noParse:'/jquery/',//不去解析設置的包所依賴的關係,如jquery
}

1. ignorePlugin

module:{
    noParse:'/jquery/',//不去解析設置的包所依賴的關係
    rules:[
        {
            test:/\.js$/,
            exclude:/node_modules/,
            include:path.resolve('src'),
            use:{
                loader:'babel-loader',
                options:{
                    presets:[
                        '@babel/preset-env',
                        '@babel/preset-react'
                    ]
                }
            }
        }
    ]
}

經過exclude排除和include包含某些模塊
另外也可使用webpack自帶的ignorePlugin插件排除某些包，減小體積。

new webpack.IgnorePlugin(/\.\/locale/,/moment/),

以上配置忽略了時間格式化moment.js中的語言包

1. happypack多線程打包

let Happypack=require('happypack')
...
module.exports={
    module:{
        noParse:'/jquery/',//不去解析設置的包所依賴的關係
        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'
                        ]
                    }
                }
            ]
        })
    ]
}

1. webpack內置功能

(1)tree-shaking
(2)scope-hosting
這兩項優化只在生產環境下有效

1. 抽離公共代碼

module.exports={
    optimization:{
        splitChunks:{//分割代碼塊
            cacheGroups:{//緩衝組
                common:{
                    chunks:'initial',
                    minSize:0,//抽離模塊最小粒度是0
                    minChunks:2//表示代碼塊用過2次以上就要抽離
                },
                vendor:{
                    priority:1,//至關於權重，先抽離第三方模塊，若是不設置該屬性，分割代碼塊將從上到下，沒法抽離第三方模塊。
                    test:/node_modules/,
                    chunks:'initial',
                    minSize:0,//抽離模塊最小是0
                    minChunks:2//表示用過2次以上就要抽離
                }
            }
        }
    },
}

1. 文件熱更新

devServer:{
    hot:true
},
plugins:[
    new webpack.NamedModulesPlugin(),//打印更新的模塊路徑
    new webpack.HotModuleReplacementPlugin()//熱更新
]

7.可使用dllPlugin動態連接庫優化
DllPlugin 和 DllReferencePlugin提供了以大幅度提升構建時間性能的方式拆分軟件包的方法。原理是將特定的第三方NPM包模塊提早構建，而後經過頁面引入。這不只可以使得vendor文件能夠大幅度減少，同時，也極大的提升了構件速度。網上別的大神有一篇文章寫的很詳細，能夠參考，傳送門。

以上就是一些本身在學習webpack4.0配置過程當中的一些學習記錄，寫出來和你們分享，若是有錯誤，還望告知。我的博客同步更新，歡迎關注交流！不要忘了點個贊，謝謝！