webpack 打包第三方库_webpack打包分离第三方库和业务代码
使用webpack打包工程，通常會需要分離第三方類庫和應用本身的代碼，因為第三方類庫更新頻率不高，這樣瀏覽器可以直接從緩存讀，不需要項目每次上線再獲取一次。
以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 };
然后我們會發現，一旦應用代碼發生變化，重新打包后app.js和vendor.js的hash值都會發生變化，具體原因大致就是由于app.js變了，webpack會生成一段runtime注入vendor.js，導致vendor.js也變了(因為兩者有關聯)。
解決方法目前我知道二種比較好。
第一種是利用webpack.DllPlugin，具體使用方法網上很多，配置稍微有點復雜，這里不列舉了。
第二種方法是利用CommonsChunkPlugin生成一個專門跟蹤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 };
完成后我們修改應用代碼，再重新打包，結果vendor.js的hash值不再發生變化。
我看過的網上的教程，基本上都到這里就結束了。然而當我運行代碼，想查看效果，結果卻是空白頁，chrome下有報錯：
？？？
當時真是一下就懵了。google、stackoverflow搜了好久都沒找到滿意的答案(可能是搜商比較低)。
后來我無意中去看生成的index.html，發現里面插入的js順序是這樣的：
然后再打開chrome里的第一行報錯：
發現報錯是從app.js開始的。正常情況下應該是app.js引用vendor.js中的方法，即app.js的加載順序應該在vendor.js之后，但現在順序卻顛倒了，會不會是這個原因造成的？
于是我們手動修改index.html，交換一下app.js和vendor.js的加載順序。再重新運行代碼，結果顯示正確了。
看來是chunks注入順序混亂導致的，那有沒有方法按照正確的引用順序注入呢？這就要看html-webpack-plugin插件了。
原本關于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中有個配置項叫chunksSortMode，它可以指定chunks注入的順序，其可以配置為："none" | "auto" | "dependency" | {function}。默認配置是"auto"。
現在我們加上這個配置項，并配置為"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，發現這下app.js在vendor.js后面了，最后運行程序也能正常顯示了。
總結
以上是生活随笔為你收集整理的webpack 打包第三方库_webpack打包分离第三方库和业务代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： frp 后台地址_Frp后台自动启动的几
- 下一篇： 前端做微信好友分享_前端微信分享，调用微