webpack 打包第三方库_webpack打包分离第三方库和业务代码
使用webpack打包工程，通常會(huì)需要分離第三方類庫(kù)和應(yīng)用本身的代碼，因?yàn)榈谌筋悗?kù)更新頻率不高，這樣瀏覽器可以直接從緩存讀，不需要項(xiàng)目每次上線再獲取一次。
以react為例，正常情況下，最初是這么配置的：
1 module.exports ={
2 entry: {
3 app: "./src/App.js",
4 vendor: ["react", "react-dom"]
5 },
6 output: {
7 path: __dirname + "/dist",
8 filename: "[name].[chunkhash:8].js",
9 publicPath: "/dist/"
10 },
11 ...
12 plugins: [
13 ...
14 newwebpack.optimize.CommonsChunkPlugin({
15 names: ["vendor"]
16 })
17 ]
18 };
然后我們會(huì)發(fā)現(xiàn)，一旦應(yīng)用代碼發(fā)生變化，重新打包后app.js和vendor.js的hash值都會(huì)發(fā)生變化，具體原因大致就是由于app.js變了，webpack會(huì)生成一段runtime注入vendor.js，導(dǎo)致vendor.js也變了(因?yàn)閮烧哂嘘P(guān)聯(lián))。
解決方法目前我知道二種比較好。
第一種是利用webpack.DllPlugin，具體使用方法網(wǎng)上很多，配置稍微有點(diǎn)復(fù)雜，這里不列舉了。
第二種方法是利用CommonsChunkPlugin生成一個(gè)專門跟蹤vendor.js變化的js文件，一般可以取名manifest.js，具體配置如下：
1 module.exports ={
2 entry: {
3 app: "./src/App.js",
4 vendor: ["react", "react-dom"]
5 },
6 output: {
7 path: __dirname + "/dist",
8 filename: "[name].[chunkhash:8].js",
9 publicPath: "/dist/"
10 },
11 ...
12 plugins: [
13 ...
14 newwebpack.optimize.CommonsChunkPlugin({
15 names: ["vendor", "manifest"]
16 })
17 ]
18 };
其中CommonsChunkPlugin的配置還能這么配：
1 module.exports ={
2 ...
3 plugins: [
4 ...
5 newwebpack.optimize.CommonsChunkPlugin({
6 names: ["vendor"]
7 }),
8 newwebpack.optimize.CommonsChunkPlugin({
9 names: ["manifest"],
10 chunks: ["vendor"]
11 })
12 ]
13 };
完成后我們修改應(yīng)用代碼，再重新打包，結(jié)果vendor.js的hash值不再發(fā)生變化。
我看過(guò)的網(wǎng)上的教程，基本上都到這里就結(jié)束了。然而當(dāng)我運(yùn)行代碼，想查看效果，結(jié)果卻是空白頁(yè)，chrome下有報(bào)錯(cuò)：
？？？
當(dāng)時(shí)真是一下就懵了。google、stackoverflow搜了好久都沒(méi)找到滿意的答案(可能是搜商比較低)。
后來(lái)我無(wú)意中去看生成的index.html，發(fā)現(xiàn)里面插入的js順序是這樣的：
然后再打開(kāi)chrome里的第一行報(bào)錯(cuò)：
發(fā)現(xiàn)報(bào)錯(cuò)是從app.js開(kāi)始的。正常情況下應(yīng)該是app.js引用vendor.js中的方法，即app.js的加載順序應(yīng)該在vendor.js之后，但現(xiàn)在順序卻顛倒了，會(huì)不會(huì)是這個(gè)原因造成的？
于是我們手動(dòng)修改index.html，交換一下app.js和vendor.js的加載順序。再重新運(yùn)行代碼，結(jié)果顯示正確了。
看來(lái)是chunks注入順序混亂導(dǎo)致的，那有沒(méi)有方法按照正確的引用順序注入呢？這就要看html-webpack-plugin插件了。
原本關(guān)于html-webpack-plugin插件我們是這么配的：
1 module.exports ={
2 ...
3 plugins: [
4 ...
5 newHtmlPlugin({
6 filename: "../index.html",
7 template: __dirname + "/src/templates/index.html"
8 })
9 ]
10 };
而html-webpack-plugin中有個(gè)配置項(xiàng)叫chunksSortMode，它可以指定chunks注入的順序，其可以配置為："none" | "auto" | "dependency" | {function}。默認(rèn)配置是"auto"。
現(xiàn)在我們加上這個(gè)配置項(xiàng)，并配置為"dependency"：
1 module.exports ={
2 ...
3 plugins: [
4 ...
5 newHtmlPlugin({
6 filename: "../index.html",
7 template: __dirname + "/src/templates/index.html",
8 chunksSortMode: "dependency"
9 })
10 ]
11 };
然后再重新打包，再看index.html，發(fā)現(xiàn)這下app.js在vendor.js后面了，最后運(yùn)行程序也能正常顯示了。
總結(jié)
以上是生活随笔為你收集整理的webpack 打包第三方库_webpack打包分离第三方库和业务代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： frp 后台地址_Frp后台自动启动的几
- 下一篇： hi3516配置wifi_HISI 35