webpack學習筆記—優化緩存、合併、懶加載等

　　除了前面的webpack基本配置，還能夠進一步添加配置，優化合並文件，加快編譯速度。下面是生產環境配置文件webpack.production.js，與wenbpack.config.js相比其不須要一些dev-tools,dev-server和jshint校驗等，將與開發相關的東西刪掉。下面的介紹均以此代碼配置做參考。

  1 /*生成環境配置文件：不須要一些dev-tools,dev-server和jshint校驗等。和開發有關的東西刪掉*/
  2 var webpack = require('webpack');
  3 var path = require('path');
  4 var node_modules = path.resolve(__dirname, 'node_modules');
  5 var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
  6 var pathToReactDOM = path.resolve(node_modules, 'react-dom/dist/react-dom.min.js');
  7 var ExtractTextPlugin = require('extract-text-webpack-plugin');
  8 var HtmlWebpackPlugin = require('html-webpack-plugin');
  9 //具體做用及缺點見plugins中的描述
 10 //var WebpackMd5Hash = require('webpack-md5-hash');
 11 // 該插件是對「webpack-md5-hash」的改進：在主文件中獲取到各異步模塊的hash值，而後將這些hash值與主文件的代碼內容一同做爲計算hash的參數，這樣就能保證主文件的hash值會跟隨異步模塊的修改而修改。
 12 var WebpackSplitHash = require('webpack-split-hash');
 13 
 14 var config = {
 15     entry:{
 16         app:path.resolve(__dirname, 'src/js/entry.js'),
 17         mobile: path.resolve(__dirname, 'src/js/mobile.js'),
 18         //添加要打包在vendors.js裏面的庫
 19         vendors:['react','react-dom']
 20     },
 21     resolve:{
 22         alias: {
 23             'react.js': pathToReact, //alias:別名,
 24             'react-dom.js': pathToReactDOM
 25         },
 26         fallback: path.join(__dirname, "node_modules")
 27     },
 28     resolveLoader: { 
 29         fallback: path.join(__dirname, "node_modules") 
 30     },
 31     output:{
 32         path:path.resolve(__dirname, 'dist'),
 33         publicPath:'../',//生成的html裏的引用路徑用 publicPath
 34         //以文件內容的MD5生成Hash名稱的script來防止緩存
 35         filename: 'js/[name].[chunkhash:8].js',
 36         //異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
 37         chunkFilename: 'js/[name].[chunkhash:8].js'
 38     },
 39     module:{
 40         loaders:[{
 41             test: /\.jsx?$/,
 42             //這裏(node_modules文件夾)不再需經過任何第三方來加載
 43             exclude:path.resolve(__dirname, 'node_modules'),
 44             loader: 'babel',
 45             query:{
 46                 presets:['es2015', 'react']
 47             }
 48         },
 49         {
 50             test:/\.css$/,
 51             //loader:'style!css'
 52             loader: ExtractTextPlugin.extract("style", "css")
 53         },
 54         {
 55             test:/\.scss$/,
 56             loader:'style!css!sass'
 57         },
 58         //url-loader:圖片、字體圖標加載器，是對file-loader的上層封裝,支持base64編碼。傳入的size（也有的寫limit) 參數是告訴它圖片若是不大於 25KB 的話要自動在它從屬的 css 文件中轉成 BASE64 字符串。
 59         {
 60             test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
 61             loader: 'url?limit=25000&name=[name].[ext]'
 62         }]
 63     },
 64     plugins:[
 65         //提取公共代碼的插件，用於提取多個入口文件的公共腳本部分，而後生成一個vendors.js。注意HTML代碼中要加載這個公共文件
 66         new webpack.optimize.CommonsChunkPlugin({
 67             name: 'vendors',
 68             filename: 'js/vendors.js'
 69         }),
 70         //在文件開頭插入banner
 71         new webpack.BannerPlugin("The file is creted by yangmin.--"+ new Date()),
 72         //壓縮js文件
 73         new webpack.optimize.UglifyJsPlugin({
 74             compress: {
 75                 warnings: false
 76             }
 77         }),
 78         /*插件：單獨使用style標籤加載css文件.contenthash表明的是文本文件內容的hash值，也就是隻有style文件的hash值*/
 79         new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設置其路徑(路徑相對於path)
 80         /*插件：動態生成html，在webpack完成前端資源打包之後，自動將打包後的資源路徑和版本號寫入HTML中，達到自動化的效果。*/
 81         new HtmlWebpackPlugin({
 82             filename:'view/index.html',    //生成的html存放路徑，相對於 path
 83             template:'src/view/index.html',    //html模板路徑
 84             inject:true,    //容許插件修改哪些內容，true/'head'/'body'/false,
 85             chunks:['vendors','app'],//加載指定模塊中的文件，不然頁面會加載全部文件
 86             hash:false,    //爲靜態資源生成hash值
 87             minify:{    //壓縮HTML文件
 88                 removeComments:false,    //移除HTML中的註釋
 89                 collapseWhitespace:false    //刪除空白符與換行符
 90             }        
 91         }),
 92         new HtmlWebpackPlugin({
 93             filename:'view/mobile.html',    //生成的html存放路徑，相對於 path
 94             template:'src/view/mobile.html',    //html模板路徑
 95             inject:true,    //容許插件修改哪些內容，true/'head'/'body'/false,
 96             chunks:['vendors','mobile'],//加載指定模塊中的文件，不然頁面會加載所欲文件
 97             hash:false,    //爲靜態資源生成hash值
 98             minify:{    //壓縮HTML文件
 99                 removeComments:false,    //移除HTML中的註釋
100                 collapseWhitespace:false    //刪除空白符與換行符
101             }
102         }),
103         /*做用：生成具備獨立hash值的css和js文件，即css和js文件hash值解耦.
104          *缺點：webpack-md5-hash插件對chunk-hash鉤子進行捕獲並從新計算chunkhash，它的計算方法是隻計算模塊自己的當前內容（包括同步模塊）。這種計算方式把異步模塊的內容忽略掉了，會形成一個問題：異步模塊的修改並未影響主文件的hash值。
105          */
106         //new WebpackMd5Hash()
107         new WebpackSplitHash()
108     ]
109 }
110   module.exports = config;

1、在開發環境中使用壓縮文件

例如ReactJS項目中爲了避免讓 Webpack 去遍歷 React JS 及其全部依賴，你能夠在webpack.config.js中重寫它的行爲。

config.alias: 每當 "react" 在代碼中被引入，它會使用壓縮後的 React JS 文件。

noParse: 阻止Webpack 去解析那個壓縮後的文件。

當加載多個壓縮文件時，下述方法更優雅簡便,webpack.production.js:

 1 var webpack = require("webpack");
 2 ...
 3 var HtmlWebpackPlugin = require('html-webpack-plugin');
 4 
 5 var deps = [
 6     'react/dist/react.min.js',
 7     'react-dom/dist/react-dom.min.js'
 8 ];
 9 var config = {
10     ...
11     resolve:{
12         alias:{},
13         fallback:path.join(__dirname, "node_modules")
14     },
15     ...
16     module:{
17          ...
18          noParse:[]   
19      }    
20 }
21 /*當加載多個壓縮文件時，下述方法更優雅簡便*/
22 deps.forEach(function(dep){    
23     var depPath = path.resolve(node_modules, dep);
24     //path.dep是路徑分隔符。
25     config.resolve.alias[dep.split(path.dep)[0]] = depPath;    
26     config.module.noParse.push(depPath);
27 
28 });
29 
30 module.exports = config; 

2、分離應用和第三方文件

　　當你的應用依賴其餘庫尤爲是像 React JS 這種大型庫的時候，須要考慮把這些依賴分離出去，這樣就可以讓用戶在你更新應用以後不須要再次下載第三方文件。上述配置文件中的entry裏添加了第三方包vendors，其值爲要分離打包的文件。運行配置後會在dist/js下生成三個獨立文件：app.js、mobile.js、vendors.js。注意在頁面中藥引入vendors.js

<script src="../dist/vendors.js"></script>
<script src="../dist/app.js"></script>

3、多重入口

當應用有多個頁面， 頁面之間雖然有共享代碼，可是不想在頁面中加載全部代碼時能夠定義多重入口。例如配置文件中的app.js針對pc端頁面，mobile.js僅針對移動端頁面，output的filename：'js/[name].[chunkhash:8].js',採用了文件名變量，這樣在dist/js中可生成與源文件同名的文件。

4、優化緩存及懶加載

　　在生產環境中，將輸出文件名添加hash值，目的是在文件更改時強制客戶端從新加載這個文件，而未改變的文件繼續使用緩存文件。經常使用的有hash和chunkhash，兩者的區別請參考hash與chunkhash。配置文件中的[chunkhash:8]即截取8位chunkhash值。　　

　　webpack的編譯理念：webpack將style視爲js的一部分，因此在計算chunkhash時，會把全部的js代碼和style代碼混合在一塊兒計算。好比entry.js引用了main.css：

import 'main.css'; 
alert('I am main.js');

webpack計算chunkhash時，以entry.js文件爲編譯入口，整個chunk的內容會將main.css的內容也計算在內。因此，不管是修改了js代碼仍是css代碼，整個chunk的內容都改變了，計算所得的chunkhash隨之改變。但理想狀況下是想css或js內容改變時僅影響自身文件的chunkhash，這樣客戶端只需更新一部分文件。解決此問題首先要將css單獨編譯輸出文件，由於正常狀況下webpack會把js文件中引入的css文件編譯輸出到html頁面的<style></style>標籤中。

1.使用extract-text-webpack-plugin單獨編譯輸出css文件

安裝extract-text-webpack-plugin，

npm install extract-text-webpack-plugin  --save-dev

而後在配置文件中引入插件， 

//webpack.production.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin');

該插件除了chunkhash還提供了另一種hash值contenthash。顧名思義，contenthash表明的是文本文件內容的hash值，也就是隻有style文件的hash值。此hash是可解決上述問題的關鍵所在。上述配置文件使用了contenthash：

//webpack.production.config.js
new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設置其路徑(路徑相對於path)

2.使用使用webpack-md5-hash解耦css和js文件hash值

　　再考慮如下狀況，只修改了main.css文件，未修改entry.js文件，編譯輸出的js文件hash是否改變？答案是改變了，由於上文提到的webpack的編譯理念，webpack將style視爲js的一部分，因此在計算chunkhash時，會把全部的js代碼和style代碼混合在一塊兒計算。解決辦法是使用webpack-md5-hash插件：

//webpack.production.config.js

var WebpackMd5Hash = require('webpack-md5-hash');
...
new WebpackMd5Hash();

它的做用是生成具備獨立hash值的css和js文件，即css和js文件hash值解耦。webpack-md5-hash插件對chunk-hash鉤子進行捕獲並從新計算chunkhash，它的計算方法是隻計算模塊自己的當前內容（包括同步模塊）。

3.主文件使用hash代替chunkhash解決異步加載模塊改變時主文件hash不改變

　　假如文件中引入了異步模塊，異步模塊修改後會影響編譯輸出的js文件的chunkhash嗎？如今入口文件中引入異步模塊a.js，a.js文件又異步引入b.js，b.js同步引入c模塊

//entry.js

'use strict';

import './saveCarInfo.js';

window.onload = function(){//懶加載
    require.ensure(['./a.js'],function(require){
        var moduleA = require('./a.js');
    },'a');
};

//a.js

'use strict'

console.log("a");

setTimeout(function(){
    require.ensure([],function(require){
        require('./b.js');
    },'b');
},10000);

module.exports = "moduleA";

//b.js
import fn_c from './c.js';

console.log('b');
module.exports = 'moduleB';

//c.js

console.log("c");
module.exports = "moduleC";

運行npm run deploy,編譯輸出以下,咱們看到除了入口文件、css文件、html文件被輸出外，異步加載的模塊a.js、b.js也被當作獨立模塊輸出。

此時修改a.js文件中的代碼，經編譯後，a.[chunkhash].js的chunkhash會改變，而生成的主文件app.[chunkhash].js的chunkhash值並無改變。緣由是webpack-md5-hash的這種計算方式把異步模塊的內容忽略掉了，這會形成一個問題：異步模塊的修改並未影響主文件的chunkhash值。解決辦法是將輸出的主文件採用[hash]，而非[chunkhash]

output:{
    path:path.resolve(__dirname, 'dist'),
    publicPath:'../',//生成的html裏的引用路徑用 publicPath
    filename: 'js/[name].[hash:8].js',
    //異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
    chunkFilename: 'js/[name].[chunkhash:8].js'
},

這種作法也存在缺陷，若是項目中存在不止一個主js文件，修改任意js代碼會影響全部最終主文件的[hash]值。例如上面的項目配置中會生成兩個帶[hash]的主文件：app.[hash].js, mobile.[hash].js。不管是修改entry.js代碼仍是異步模塊a.js，或b.js的代碼，app.[hash].js和mobile.[hash].js的[hash]都會改變。

補充：npm提供了webpack-split-hash插件代替webpack-md5-hash，該插件能夠獲取到各異步模塊的hash值，而後將這些hash值與主文件的代碼內容一同做爲計算hash的參數，這樣就能保證主文件的hash值會跟隨異步模塊的修改而修改。但我驗證後沒有實現。。。

4.使用html-webpack-plugin動態生成html

　　配置文件中的輸出文件都帶了[chunkhash]做爲版本號，在style或js文件改變時，其值都會隨之改變。利用html-webpack-plugin在webpack完成前端資源打包之後，自動將打包後的資源路徑和版本號寫入HTML中，達到自動化的效果。

//webpack.production.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
var config = {
...
plugins:[
... 
    new HtmlWebpackPlugin({
        filename:'view/index.html',    //生成的html存放路徑，相對於 path
        template:'src/view/index.html',    //html模板路徑
        inject:true,    //容許插件修改哪些內容，true/'head'/'body'/false,
        chunks:['vendors','app'],//加載指定模塊中的文件，不然頁面會加載全部文件
        hash:false,    //爲靜態資源生成hash值
        minify:{    //壓縮HTML文件
            removeComments:false,    //移除HTML中的註釋
            collapseWhitespace:false    //刪除空白符與換行符
         }        
    }),
    new HtmlWebpackPlugin({
        filename:'view/mobile.html',    //生成的html存放路徑，相對於 path
        template:'src/view/mobile.html',    //html模板路徑
        inject:true,    //容許插件修改哪些內容，true/'head'/'body'/false,
        chunks:['vendors','mobile'],//加載指定模塊中的文件，不然頁面會加載全部文件
        hash:false,    //爲靜態資源生成hash值
        minify:{    //壓縮HTML文件
            removeComments:false,    //移除HTML中的註釋
            collapseWhitespace:false    //刪除空白符與換行符
         }        
    })
]}