雖然webpack的已經公升級到了webpack4，而我們目前還在使用webpack3，但其中的優化點都大同小異，公升級後同樣適用。
這三條原則永遠是一切優化的前提
1// 主要配置
2plugins:[
3 new webpack.optimize.moduleconcatenationplugin()
4]
1performance:
1
8 }
1// 開發模式
2resolve:
6}7// 生產模式
8resolve:
12}
1// .babelrc
2,14 "debug": false,
15 "usebuiltins": true
16 }],
17 "react",
18 "stage-2"
19 ]
20}
1var os = require('os')
2var optimizecssplugin = require('optimize-css-assets-webpack-plugin')
34plugins: [
5 new webpack.optimize.uglifyjsplugin(,
11 // 最緊湊的輸出
12 beautify: false,
13 // 刪除所有的注釋
14 comments: false,
15 compress: ,
25 sourcemap: true
26 }),
27 new optimizecssplugin(),
29 cssprocessoroptions:
32 }
33 })
34]
1// 此外掛程式預設全部引入語言庫，但我們只用到了中文，最多英文，所以進行了過濾，大大減少了總體**量
2plugins: [
3 new webpack.contextreplacementplugin(/moment[\/\\]locale$/, /zh|en/)
4]
這樣能最大化利用瀏覽器快取
1// 不固定版本，會造成打包後 hash 值變化，瀏覽器沒辦法利用本身的快取載入js，每次上線都會使本地快取失效，頁面載入變慢
2"dependencies":
由於cssnano預設配置，是自動會把z-index重置為1，例如：
1classname
45after
67classname
1/* eslint-disable no-unused-vars */
2module.exports =
10 ]
11 }
12 }
13}
需要注意的是，當使用按需載入的功能，然後沒有提取所有chunk包裡的css，同時又開啟了sourcemap功能，那麼就會造成這種情況
最簡單的辦法就是，對css不使用sourcemap功能，例如：
1rules: [
2 7 }
8]
vue和react的打包工具，用法一致。
以下包整合了以上所有優化，支援單頁面及多頁面應用，完全相容vue-cli生成的模版專案
zz-webpack-vue
zz-webpack-react
以下是使用本組乙個vue-cli生成的專案做的乙個優化對比：
優化前：
打包分析
優化後：
分析可以檢視具體的優化配置，或者直接在專案中嘗試使用，有任何問題歡迎隨時反饋，目前正在籌畫統一公升級webpack4
記錄一次webpack3公升級到webpack4過程
公升級之前也參考了一些網上的教程。借鑑之，進行的自己的公升級。一些版本為什麼設為那個版本號也是參考別人的結果。整體是按照先公升級npm run dev 在公升級npm run build的順序。首先公升級webpack，在package.json檔案中將webpack版本號修改為4.8.1。webp...
入門webpack 二）webpack概論
從官網 github 上的描述可以看到webpack可以將眾多模組打包成很少的的資源，將 分割成細小的部分這樣使應用程式按需要載入 塊。通過loader，webpack可以處理的模組有很多，amd定義的模組，commonjs，css，images，scss等以及自定義模組。webpack自身只能處理...
提高系列 webpack相關知識
這次我們主要研究的是webpack框架的相關知識，webpack是乙個打包構建的前端框架，用於解決前端開發的模組化問題。說到webpack，肯定你還會想到gulp和grunt這些框架，那麼webpack是做什麼的呢？他和其他的框架有什麼區別呢？我們一起來分析一下。在這一段落中我們主要對webpack...