Tree Shaking 樹木搖晃：不用的js功能不打包
當有多個函數功能時，只調用了其中某一些函數，但是打包時，會統統全部打包，造成浪費，這個時候就要使用“搖樹”，將沒有用到的功能搖出去，再打包；
業務代碼中凡是用import引入都模塊，都會檢查是否調用了模塊里面的方法
開發模式下，沒有調用的函數，也還是會打包進去，因為會調試，
但是生產環境，就會徹底生效，不過生產環境無需配置，但是package.json中還是要設置
package.json中規定哪些文件不用檢查
這里是所有css文件不檢查，如果沒有則是false
Develoment和Production模式的區分打包：開發模式和生產模式
未區分前：共同使用一個配置，容易造成配置的臃腫，多余；
區分配置：有些配置只適合某一個模式，就不是造成配置多余；
將webpack.config.js配置，分為兩種模式的打包方式
分別配置webpack.dev.js開發配置和webpack.prod.js生產配置
在package.json中的啟動方式要通過--config來改變
但是，如果僅上面這樣創建兩個配置，里面又有大量相同的內容，又造成浪費：
接着創建一個webpack.common.js的公共配置，用來放webpack.dev.js開發配置和webpack.prod.js生產配置的公共部分
提取公共部分結束后，安裝npm install webpack-merge --save-dev,合並配置；用來公共配置與webpack.dev.js和webpack.prod.js的結合
以合並生成環境配置為例：
合並結束可以用完美來形容。。。。但是看着不舒服啊，根目錄下多了3個配置
新建一個build文件夾，將3個配置放進去，然后在package.json中啟動要添加路徑
vue-cli就是這樣處理開發模式和生產模式。。。。。。這下看着舒服了
webpack和code Splitting:
JS代碼分割，與webpack無關,通過對代碼的拆分提高性能；
將業務代碼和引用的庫、模塊分割打包，會同時引用兩個js文件，比不分割引用一個大的js文件性能高；而且改變業務代碼，瀏覽器不會再重載引用的庫，大大提高性能；
1.同步代碼：import引入庫、模塊再繼續執行業務代碼，按順序
all是異步同步都分割
2.異步代碼：在函數里面引入庫、模塊，就無需配置，也會分割，因為有默認值
不過異步代碼打包庫出來的js名字默認是數字.js 如：0.js,不是很好看，可以在引入的設置
這個注釋就可以改名字輸出
但是輸出的名字會帶一個vendors~,上圖輸出的就是vendors~loadsh.js,要想移出vendors,需要在webpack中配置
代碼分割，如果不寫會有默認配置
等價於 
參數的意思如下圖
Lazy loading 懶加載：通過對代碼的分割
，一些異步加載的模塊，在頁面刷新時，不需要展示，就不用加載，然后在用戶完成需要或將需要新代碼塊的操作后加載它。這會加速應用程序的初始負載，並減輕其整體重量，因為某些塊甚至可能永遠不會加載。
打包內容分析：webpack提供了一個庫analyse；github上有
在package.json中打包快捷鍵中增加紅線的字符，打包出來會多一個stats.json文件，
訪問http://webpack.github.com/analyse，上傳這個json文件即可
webpack推薦用異步：異步可以減少首屏時間，提高性能，但是當觸發某異步的文件時，又會感覺加載變慢，影響體驗；
解決方法：Prefetching modules；空閑時間偷偷加載
就是首屏加載完成后，在閑置的時間能加載異步，當觸發時，異步已經加載過了，所以就會很快，而也不會影響首屏的加載
引入異步模塊時，使用魔法注釋：/* webpackPrefetch:true */就可以
前言webpack的打包會把css打包到js中去,所以便有了css代碼分割
css代碼分割：
MiniCssExtractPlugin，不支持熱模塊，所以改變css要手動刷新，降低開發效率，所以只適用於生成環境打包用
npm install --save-dev mini-css-extract-plugin
使用MiniCssExtractPlugin.loader替換style-loader
也有配置：可以將所有的css代碼分割到一個文件中
但是這樣分離出來的代碼，是沒有被壓縮的代碼。。。。。
安裝壓縮合並CSS插件Minimizing For Production：
npm install optimize-css-assets-webpack-plugin --save-dev
webpack與瀏覽器緩存Caching:
開發環境不存在這個，在生產環境中，打包的文件上傳服務器，被用戶使用后，會被緩存在瀏覽器時；當需要修改代碼時，又重新打包上傳，而用戶的瀏覽器發現加載的文件名字一樣，就不會重新加載，還是會從緩存中加載，就造成了修改的代碼不能更新使用；
解決方法：每次打包的文件，都會有自己的hash值，只要文件修改，hash值才會變化，不修改，無論打包幾次，值都不會發送改變；
在webpack.prod.js生成配置中輸出時使用contenthash,這樣修改的文件名就會改變，而用戶的瀏覽器發現不一樣的文件，就會重新加載，相同名文件則不會加載，這有提高了性能
Shimming:墊片，解決某些問題
webpack的核心就是模塊與模塊之間分開，
但是當有些公共模塊或庫需要在多個模塊中調用，
或者比如有一些第三方庫使用了JQ的$,但是不是用import引用的，當你調用時，不能識別，
就可以在webpack的配置中引入webpack的插件ProvidePlugin
以JQ為例，當模塊使用$時，就會自動在模塊頂部添加import $ from 'jquery'
