深刻淺出的webpack構建工具---webpack3版本的CommonsChunkPlugin詳解(六)

時間 2019-11-13

標籤深刻 webpack 構建工具 webpack3 版本 commonschunkplugin 詳解简体版

原文原文鏈接

閱讀目錄css

二：webpack3中CommonsChunkPlugin配置項及含義？node

一：什麼是CommonsChunkPlugin, 它的做用是什麼？jquery

CommonsChunkPlugin插件是用來提取公共代碼的，好比一個文件它包含了多個入口chunk的公共模塊，經過將公共模塊提取出來，最終打包的文件在頁面加載的時候只加載一次(好比jquery相似的公共文件)，若是該文件有改動，生成的編譯文件的hash值會改變的，所以生成的文件名就不同，那麼瀏覽器就會從新請求下該資源文件，若是該文件沒有被修改，它會在瀏覽器緩存中，之後再加載頁面時候，瀏覽器會從緩存中讀取，所以當進入該頁面的時候，只要公共文件沒有被修改，瀏覽器它都會從緩存讀取，這樣就能夠提升頁面的加載效率。固然若是咱們不使用CommonsChunkPlugin插件的話，好比第三方插件或者本身公用的模塊插件就會打包到一個文件內，好比app.js內，該app.js文件就會變大，那麼之後只要app.js文件有其餘代碼進行改動的話，那麼瀏覽器會把全部的內容都
從新加載一遍，這樣瀏覽器加載效率會很低。webpack

回到頂部

二：webpack3中CommonsChunkPlugin配置項及含義？ios

從官網得知，它有以下配置項：git

{
  name: string,  
  names: string[],
  filename: string, 
  minChunks: number|Infinity, 
  chunks: string[],
  children: boolean,
  async: boolean|string,
  minSize: number
}

咱們先看下常用參數的具體含義以下：
name： 給這個包含公共代碼的chunk命名
filename： 命名打包後生成的js文件
minChunks: 公共代碼的判斷標準，某個js模塊被多少個文件引入纔算公共代碼，默認爲1，咱們能夠爲2, 也就是說若是
一個文件被其餘頁面引入了超過了2次及以上，就能夠認爲該文件就是公用代碼。
chunks: 表示須要在哪些chunk(配置中entry的每一項)裏尋找公共代碼進行打包，默認不設置，那麼它的尋找範圍爲全部的chunk。github

下面咱們仍是先來看看我項目的整個目錄結構以下：web

### 目錄結構以下：
demo1                                       # 工程名
|   |--- dist                               # 打包後生成的目錄文件             
|   |--- node_modules                       # 全部的依賴包
|   |--- js                                 # 存放全部js文件
|   | |-- demo1.js  
|   | |-- main.js                           # js入口文件
|   |--- libs                               # 存放全部的公用插件，庫等，好比jquery等相似的文件
|   |
|   |--- webpack.config.js                  # webpack配置文件
|   |--- index.html                         # html文件
|   |--- styles                             # 存放全部的css樣式文件   
|   | |-- main.styl                         # main.styl文件   
|   | |-- index.styl                        
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉碼文件

首先咱們先看下package.json依賴的代碼以下：npm

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "webpack是3.0.0版本的",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
    "build": "webpack --progress --colors --devtool cheap-module-source-map"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "cssnano": "^4.0.5",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "path": "^0.12.7",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-pxtorem": "^4.0.1",
    "postcss-sprites": "^4.2.1",
    "style-loader": "^0.21.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^1.0.1",
    "webpack": "^3.0.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "http-proxy-middleware": "^0.18.0",
    "jquery": "^3.3.1"
  }
}

注意：如上webpack是3.0.0版本的。而後我覺得把webpack改爲3.0.0之後覺得就能夠了，運行npm run dev 命令後，以下報錯：

而後我繼續百度搜索 TypeError: Cannot read property 'thisCompilation' of undefined 報錯的緣由，聽說是extract-text-webpack-plugin版本的問題，所以我須要先卸載掉extract-text-webpack-plugin，而後進行從新安裝。以下命令：

安裝完成之後，我繼續運行 npm run dev 後，發現仍是會報錯，報錯信息是 TypeError: Cannot read property 'compile' of undefined，以下圖報錯所示：

一樣的道理，也同樣百度搜索該答案，聽說：webpack-dev-server若是是3.x的話，webpack必須是4.x纔不會報此TypeError: Cannot read property 'compile' of undefined錯誤, 同理若是webpack是3.x，則webpack-dev-server必須是2.x
所以咱們須要安裝 webpack-dev-server 2.xx版本的便可：以下圖所示：

而後咱們再進行打包就不會報錯了。所以更新後的package.json文件以下版本：

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "webpack3.x.x版本的",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
    "build": "webpack --progress --colors --devtool cheap-module-source-map"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "cssnano": "^4.0.5",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "path": "^0.12.7",
    "postcss-cssnext": "^3.1.0",
    "postcss-loader": "^3.0.0",
    "postcss-pxtorem": "^4.0.1",
    "postcss-sprites": "^4.2.1",
    "style-loader": "^0.21.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^1.0.1",
    "webpack": "^3.0.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^2.3.0"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "http-proxy-middleware": "^0.18.0",
    "jquery": "^3.3.1"
  }
}

下面咱們繼續看下咱們的入口文件 main.js 代碼以下：

require('jquery');

webpack.config.js 配置代碼以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ClearWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './js/main.js',
  output: {
    filename: 'bundle.js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  },
  mode: 'development',
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 100,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除文件
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    // modules: ['plugin', 'js']
  },
  /*
  externals: {
    jquery: 'jQuery'
  },
  */
  devtool: 'source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  plugins: [
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `main.css`
    })
  ]
};

如上是全部的配置，配置代碼的含義是把入口文件的main.js 代碼打包到dist目錄下的 bundle.js 代碼內，那麼因爲main.js 代碼內把jquery.js引入進來了，
所以他會把jquery也會打包到main.js代碼內部去；

咱們繼續查看dist目錄下的bundle.js，本身能夠查看代碼能夠看到會把jquery全部代碼打包進去了。固然在webpack中，咱們能夠把 externals配置項打開，加上以下代碼，也不會把jquery打包到bundle.js內部，bundle.js內部會對jquery作了一個引用而已：以下代碼：

externals: {
  jquery: 'jQuery'
},

可是在頁面上須要引用jquery源文件代碼，如index.html上的代碼引入了

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

好比index.html 代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <link href="dist/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="app"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

關於 externals的理解，能夠看這篇文章（https://www.cnblogs.com/tugenhua0707/p/9384953.html#_labe2_8）

上面只是講解了下關於不使用 CommonsChunkPlugin 插件，它會把require依賴的公用文件會打包到bundle.js代碼內。
下面來說解下使用 CommonsChunkPlugin 插件如何來避免這種狀況的發生。

1. 首先咱們先要引入CommonsChunkPlugin 以下代碼：

// 引入 CommonsChunkPlugin 插件
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

2. 在plugins裏面配置下便可，以下代碼：

module.exports = {
  plugins: [
    new CommonsChunkPlugin({
      name: 'vender', // 公共代碼的chunk命名爲 'verder'
      filename: '[name].bundle.js' // 生成的文件名爲 vender.bundle.js
    })
  ]
};

3. 入口文件改爲以下：

entry: {
  vender: ['./libs/jquery.js'],
  main: './js/main.js'
}

如上它會把jquery等相似的文件打包到 vender.js中了。vender它是一個數組，裏面能夠存放多個相似的文件，均可以打包到一個公用的文件裏面去，
可是也要考慮好，文件大小，若是10幾個庫文件打包到一個vender.js內的話，那麼該文件將會變得很大，那麼頁面在加載的時候，會影響頁面加載的效率，
因此在這種狀況下，能夠分多個文件分別打包到文件內，具體的看本身在項目中權衡吧。

3.1 爲了打包html文件，咱們引入了 html-webpack-plugin 插件，以下須要引入的代碼：

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

3.2 打包以前咱們須要清除dist目錄下的文件，而後再生成新的包，所以咱們引入 clean-webpack-plugin 插件，以下代碼：

// 清除dist目錄下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

所以plugins的全部插件配置以下：

module.exports = {
  plugins: [
    new ClearWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `main.css`
    }),

    new CommonsChunkPlugin({
      name: 'vender', // 公共代碼的chunk命名爲 'verder'
      filename: '[name].bundle.js' // 生成的文件名爲 vender.bundle.js
    })
  ]
}

因此在項目的根目錄下，咱們index.html代碼變成以下了：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">22222</div>
  <div class="test1">12aaa</div>
  <div class='test2'>vvvvv</div>
</body>
</html>

js/main.js 代碼以下：

require('../styles/main.styl');

$('#app').html('歡迎你來個人博客'); // 就可使用了

webpack.config.js 全部配置代碼以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 清除dist目錄下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 CommonsChunkPlugin 插件
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
  entry: {
    vender: ['./libs/jquery.js'],
    main: './js/main.js'
  },
  output: {
    filename: '[name].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist'),
    publicPath: './'
  },
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除文件
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    // modules: ['plugin', 'js']
  },
  devtool: 'source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  plugins: [
    new ClearWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `main.css`
    }),

    new CommonsChunkPlugin({
      name: 'vender', // 公共代碼的chunk命名爲 'verder'
      filename: '[name].bundle.js' // 生成的文件名爲 vender.bundle.js
    })
  ]
};

3.3. 模塊重複引用的問題，最終會把相同的模塊打包到入口文件內。

如今咱們js目錄下有以下文件：
js/main.js 入口文件，代碼以下：

require('../styles/main.styl');
$('#app').html('歡迎你來個人博客');

require('./demo1.js');
require('./main2.js');

js/main2.js 代碼以下：

require('./demo1.js');

js/demo1.js 代碼以下：

export default function printMe() {
 console.log('11111111');
}

打包後，發現main.js源碼內只有一份代碼：以下main.js代碼：

webpackJsonp([0],{

/***/ 36:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (immutable) */ __webpack_exports__["default"] = printMe;

function printMe() {
  console.log('11111111');
}
console.log(a);

/***/ }),

/***/ 72:
/***/ (function(module, exports, __webpack_require__) {


__webpack_require__(73);

$('#app').html('歡迎你來個人博客');

__webpack_require__(36);
__webpack_require__(74);

/***/ }),

/***/ 73:
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ }),

/***/ 74:
/***/ (function(module, exports, __webpack_require__) {


__webpack_require__(36);

/***/ })

},[72]);
//# sourceMappingURL=main.js.map

3.4 多入口，模塊重複引用，會將多個引用模塊被打包到公共模塊。

webpack中enter配置以下：

entry: {
  vender: ['./libs/jquery.js'],
  main: './js/main.js',
  main2: './js/main2.js'
},

好比main.js 代碼以下：

require('../styles/main.styl');

$('#app').html('歡迎你來個人博客');

console.log('這是main.js');
require('./demo1.js');

main2.js 代碼以下：

console.log('這是main2.js');
require('./demo1.js');

如上main.js和main2.js 代碼都引用了 demo1.js，demo1.js 代碼以下：

export default function printMe() {
 console.log('11111111');
}

而後經過如上代碼後，main1.js代碼打包後變爲以下：

webpackJsonp([0],{

/***/ 72:
/***/ (function(module, exports, __webpack_require__) {


__webpack_require__(73);

$('#app').html('歡迎你來個人博客');

console.log('這是main.js');
__webpack_require__(36);

/***/ }),

/***/ 73:
/***/ (function(module, exports) {

// removed by extract-text-webpack-plugin

/***/ })

},[72]);
//# sourceMappingURL=main.js.map

main2.js 代碼以下：

webpackJsonp([1],{

/***/ 74:
/***/ (function(module, exports, __webpack_require__) {


console.log('這是main2.js');
__webpack_require__(36);

/***/ })

},[74]);
//# sourceMappingURL=main2.js.map

能夠看到公用代碼被提取到vender.js代碼內部了。

全部的webpack.config.js代碼以下：

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

// 清除dist目錄下的文件
const ClearWebpackPlugin = require('clean-webpack-plugin');

const webpack = require('webpack');

// 引入打包html文件
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 引入 CommonsChunkPlugin 插件
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {
  entry: {
    vender: ['./libs/jquery.js'],
    main: './js/main.js',
    main2: './js/main2.js'
  },
  output: {
    filename: '[name].js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist'),
    publicPath: './'
  },
  module: {
    rules: [
      {
        // 使用正則去匹配
        test: /\.styl$/,
        use: ExtractTextPlugin.extract({
          fallback: {
            loader: 'style-loader'
          },
          use: [
            {
              loader: 'css-loader',
              options: {}
            },
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss',
                plugins: [
                  require('postcss-cssnext')(),
                  require('cssnano')(),
                  require('postcss-pxtorem')({
                    rootValue: 16,
                    unitPrecision: 5,
                    propWhiteList: []
                  }),
                  require('postcss-sprites')()
                ]
              }
            },
            {
              loader: 'stylus-loader',
              options: {}
            }
          ]
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除文件
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.json']
  },
  devtool: 'source-map',
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    port: 8081,
    host: '0.0.0.0',
    headers: {
      'X-foo': '112233'
    },
    // hot: true,
    inline: true,
    // open: true,
    overlay: true,
    stats: 'errors-only'
  },
  plugins: [
    new ClearWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: './index.html' // 模版文件
    }),
    new ExtractTextPlugin({
      // 從js文件中提取出來的 .css文件的名稱
      filename: `main.css`
    }),

    new CommonsChunkPlugin({
      name: 'vender', // 公共代碼的chunk命名爲 'verder'
      filename: '[name].bundle.js' // 生成的文件名爲 vender.bundle.js
    })
  ]
};

3.4 將第三方業務模塊分開打包。
如上咱們把公用代碼和jquery源代碼都打包到了vender.js內部去了，可是有時候咱們想jquery類型第三方業務代碼單獨在一個文件內，公用的代碼打包到另外一個文件內，這樣調試代碼也比較方便看代碼，所以咱們能夠以下配置：

CommonsChunkPlugin 配置改成以下：

new CommonsChunkPlugin({
  name: ['chunk', 'vender'], 
  filename: '[name].bundle.js' // 生成的文件名爲 vender.bundle.js
});

如上它會把 jquery等類庫的代碼打包到vender.js內部，可是會把頁面上其餘的公用代碼打包到 chunk.js 代碼內部，以下dist目錄

chunk.bundle.js代碼以下：

webpackJsonp([2],{

/***/ 36:
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (immutable) */ __webpack_exports__["default"] = printMe;

function printMe() {
  console.log('11111111');
}

/***/ })

});
//# sourceMappingURL=chunk.bundle.js.map