接上一篇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,//抽離模塊最小粒度是0minChunks:2//表示代碼塊用過2次以上就要抽離},vendor:{priority:1,//相當于權重，先抽離第三方模塊，如果不設置該屬性，分割代碼塊將從上到下，無法抽離第三方模塊。test:/node_modules/,chunks:'initial',minSize:0,//抽離模塊最小是0minChunks:2//表示用過2次以上就要抽離}}}},
}

1. 文件熱更新

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

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

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