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

定義環境變量

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

webpack簡單優化

noParse

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

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中的語言包

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']}}]})] }

webpack內置功能

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

抽離公共代碼

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

文件熱更新

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

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

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的webpack4.0配置记录（2）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。