webpack 獨立打包與緩存處理

時間 2019-11-06

標籤 webpack 獨立打包緩存處理简体版

原文原文鏈接

關於

微信公衆號：前端呼啦圈（Love-FED）
個人博客：勞卜的博客
知乎專欄：前端呼啦圈

前言

先前寫了一篇webpack入門的文章《webpack入門必知必會》，簡單介紹了webpack拆分、打包、壓縮的使用方法。本文將在上篇文章的基礎上進一步講解在使用webpack構建的項目中存在的優化方案與解決方法。javascript

上篇文章中寫了一份webpack最基本的配置文件來打包壓縮咱們的代碼：html

var path = require('path');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}複製代碼

在入口文件index.js中咱們引入了jQuery：前端

// index.js
var $ = require('jquery');
var str = require('./hello.js');

function main() {
    $('body').html(str);
}

main();複製代碼

這樣咱們雖然可以實現代碼的統一打包，將jQuery、index.js、hello.js通通打包到了bundle.js裏，可是會存在一個問題：每次打包都會生成一個體積較大的新bundle.js，瀏覽器沒法緩存像jQuery這樣的基本不會改動的框架庫代碼文件，影響加載速度。java

發現問題咱們就來解決問題，咱們最終但願的是將像jQuery這樣的框架庫代碼與項目自身的代碼分開打包，生成一個獨立的打包文件，縮減單個文件體積，瀏覽器也不用每次都進行加載。jquery

步驟

1.獨立打包

爲了解決上述問題，咱們須要修改咱們的webpack配置文件：webpack

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        main: './app/index.js',
        vendor: ['jquery']
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        }),
    ]
}複製代碼

上方咱們將本來的單入口文件改爲了多入口文件，並加入了vendor屬性。vendor屬性用於配置打包第三方類庫，寫入數組的類庫名將統一打包到一個文件裏。git

同時咱們將輸出的filename用[name]變量來自動生成文件名，最後咱們添加了一個CommonsChunkPlugin的插件，用於提取vendor。github

配置完成後咱們運行webpack命令：web

Hash: ee1daf95c1986768927a
Version: webpack 2.3.2
Time: 573ms
        Asset       Size  Chunks                    Chunk Names
      main.js  340 bytes       0  [emitted]         main
vendor.js     274 kB       1  [emitted]  [big]  vendor
   [0] ./~/jquery/dist/jquery.js 267 kB {1} [built]
   [1] ./app/hello.js 53 bytes {0} [built]
   [2] ./app/index.js 114 bytes {0} [built]
   [3] multi jquery 28 bytes {1} [built]複製代碼

最終發現咱們成功將jQuery打包到了vendor.js中，實現了獨立打包，可是問題又來了：每次打包後生成的文件名都是同樣的，瀏覽器可能緩存上一次的結果而沒法加載最新數據。npm

2.添加hash

爲了解決上述問題，咱們須要爲打包後的文件名添加hash值，這樣每次修改後打包的文件hash值將改變，修改配置文件以下：

module.exports = {
    ...
        output: {
            filename: '[name].[chunkHash:5].js',
            path: path.resolve(__dirname, 'dist')
        },
    ...
}複製代碼

上方咱們在輸出文件名中增長了[chunkHash:5]變量，表示打包後的文件中加入保留5位的hash值。咱們再次運行打包命令：

Hash: c7d1295f2f9a27c412d2
Version: webpack 2.3.2
Time: 603ms
          Asset       Size  Chunks                    Chunk Names
  main.2a7ad.js  337 bytes       0  [emitted]         main
vendor.49eb4.js     274 kB       1  [emitted]  [big]  vendor
   [0] ./~/jquery/dist/jquery.js 267 kB {1} [built]
   [1] ./app/hello.js 50 bytes {0} [built]
   [2] ./app/index.js 114 bytes {0} [built]
   [3] multi jquery 28 bytes {1} [built]複製代碼

上方咱們發現打包後的文件成功加上了hash值，這樣每次修改文件後hash值也會跟着變，就不怕瀏覽器緩存了，可是當咱們嘗試去修改一個js文件後再次打包，問題又來了：vendor.js的hash值也變了，咱們並無修改jQuery的源碼。

3.修改vendor配置

上述問題產生的緣由是由於CommonsChunkPlugin插件是用於提取公共代碼的，上方咱們只是提取了vendor做爲公共代碼。爲了繼續解決上述問題，其實方法很簡單，咱們須要修改CommonsChunkPlugin的配置，以下：

module.exports = {
    ...
        plugins:[
            new webpack.optimize.CommonsChunkPlugin({
                names: ['vendor', 'manifest']
            }),
        ]
    ...
}複製代碼

如此咱們修改一下hello.js中的代碼，發現vendor的hash值並未改變，而且多了一個manifest.js的小文件。manifest.js爲webpack的啓動文件代碼，它會直接影響到hash值，用mainfest單獨抽出來了，這樣vendor的hash就不會變了。

4.生成index.html

經過以上對webpack配置文件的一系列修改，咱們成功實現了webpack的獨立打包與緩存處理，可是還差最後一步。

由於咱們最終打包後生成的文件名中帶有hash值，每次都是會變的，因此咱們不能像目前這樣在index.html中寫死路徑。

index.html

...
<body>
    <script src="./dist/main.js"></script>
    <script src="./dist/vendor.js"></script>
    <script src="./dist/manifest.js"></script>
</body>
...複製代碼

以上寫法是不對的，由於缺乏了可變的hash值，所以咱們但願每次打包後index.html中的路徑也會自動加上hash值，解決方法以下：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
        plugins:[
            ...
            new HtmlWebpackPlugin({
                title: 'demo',
                template: 'index.html' // 模板路徑
            }),
            ...
        ]
    ...
}複製代碼

上方咱們引入了html-webpack-plugin這一個插件，該插件能夠幫助咱們根據模板生成html文件。在plugins設置中，title配置了生成html中的title部分，template爲模板html的路徑地址。

咱們須要下載html-webpack-plugin：

npm install html-webpack-plugin --save-dev複製代碼

安裝和配置完畢後，運行打包命令：webpack

Hash: 0c4b91e206579b31544d
Version: webpack 2.3.2
Time: 856ms
            Asset       Size  Chunks                    Chunk Names
  vendor.e1868.js     268 kB       0  [emitted]  [big]  vendor
    main.44412.js  337 bytes       1  [emitted]         main
manifest.ed186.js    5.81 kB       2  [emitted]         manifest
       index.html  292 bytes          [emitted]
   [0] ./~/jquery/dist/jquery.js 267 kB {0} [built]
   [1] ./app/hello.js 50 bytes {1} [built]
   [2] ./app/index.js 114 bytes {1} [built]
   [3] multi jquery 28 bytes {0} [built]複製代碼

咱們發如今dist目錄下生成了一個index.html文件，打開該文件後代碼以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<script type="text/javascript" src="manifest.ed186.js"></script>
<script type="text/javascript" src="vendor.e1868.js"></script>
<script type="text/javascript" src="main.44412.js"></script>
</body>
</html>複製代碼