從零開始的webpack生活-0x007：CommonsChunkPlugin基本用法

Sleepy 發布于2019-08-21 17:28 / 1713人閱讀

摘要：概述上一章講的是，和這一章依舊沒有絲毫關系，這一章講的是說實在的，這個插件略復雜，我還沒完全搞懂，大概是還沒到那么深我就已經選擇其他解決方案了吧，所以這里只講一些基本用法。直接打包幾個包當然還有許多更加復雜的用法，還請看關于章節資源源代碼

0x001 概述

上一章講的是providerPlugin，和這一章依舊沒有絲毫關系，這一章講的是CommonsChunkPlugin,說實在的，這個插件略復雜，我還沒完全搞懂，大概是還沒到那么深我就已經選擇其他解決方案了吧，所以這里只講一些基本用法。

0x002 插件介紹

這個插件就是用來提取公共代碼的，可以這么說，如果一個方法被兩個入口文件調用，那么這個方法將被打包到這兩個文件中，會形成代碼冗余，這個插件可以將這個方法提取出來，放到第三個文件中，通過在引入入口文件之前引入第三個文件，就可以避免冗余的代碼打包

0x003 栗子

為了更深刻理解，需要舉個栗子

搭建環境

+ 0x007-common-chunk-plugin
  + src
  - webpack.config.js

安裝依賴

$ npm init -y 
$ npm install --save-dev webpack

修改配置

var path       = require("path")
module.exports = {
    entry  : path.resolve(__dirname, "src/index.js"),
    output : {
        path    : path.resolve(__dirname, "dist"),
        filename: "[name].js"
    }
}

添加其他入口文件

entry  : {
    index1: path.resolve(__dirname, "src/index.js"),
    index2: path.resolve(__dirname, "src/index2.js")
},
// ./src/index.js
var timestamp = require("./utils")
timestamp()
// ./src/index2.js
var timestamp = require("./utils")
timestamp()

添加工具類./src/utils.js

export default function () {
    console.log(new Date().getTime())
}

打包并查看文件

// ./dist.index1.js
...
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
        /* harmony default export */ __webpack_exports__["default"] = (function () {
            console.log(new Date().getTime())
        });

/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var timestamp = __webpack_require__(0)
timestamp()
...

// ./dist/index2.js
...
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = (function () {
    console.log(new Date().getTime())
});

/***/ }),
/* 1 */,
/* 2 */
/***/ (function(module, exports, __webpack_require__) {

var timestamp = __webpack_require__(0)
timestamp()
...

可以看到，同樣的的utils分別被打包到了index1.js和index2.js，存在代碼冗余。

0x003 配置commonChunkPlugin

修改配置文件

var path       = require("path")
var webpack    = require("webpack")
module.exports = {
    entry  : {
        index1: path.resolve(__dirname, "src/index.js"),
        index2: path.resolve(__dirname, "src/index2.js")
    },
    output : {
        path    : path.resolve(__dirname, "dist"),
        filename: "[name].js"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor"
        })
    ]
}

再次打包，可以發現，多了一個vendor.js，里面是utils.js的方法，查看index1.js和index2.js可以發現，原先重復的地方沒了，因此我們就可以通過引入vendor.js、index1.js和vendor.js、index2.js來達到對公共代碼的提取和分離。

// ./dist/vendor.js
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony default export */ __webpack_exports__["default"] = (function () {
    console.log(new Date().getTime())
});

// ./dist/index1.js
webpackJsonp([1],[
/* 0 */,
/* 1 */
/***/ (function(module, exports, __webpack_require__) {

var timestamp = __webpack_require__(0)
timestamp()

/***/ })
],[1]);

// ./dist/index2.js
webpackJsonp([0],{

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

var timestamp = __webpack_require__(0)
timestamp()

/***/ })

},[2]);

0x004 直接打包幾個包

new webpack.optimize.CommonsChunkPlugin({
            name     : ["jquery", "lodash"],
            minChunks: Infinity,
        })

當然還有許多更加復雜的用法，還請看[webpack關于commonChunkPlugin章節][2]

### 0x005 資源

- [源代碼][3]

GPU云服務器云服務器從零開始的郵件服務器從零開始 linux從零開始 python從零開始

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89559.html

從零開始的webpack生活-0x001：webpack初次相逢

摘要：同時不能直接單純的指定輸出的文件名稱，比如，將會報錯，可以換成以下方式指定，或者其他類似方式。如果打包過程出現錯誤，比如語法錯誤，將會在控制臺以紅色文字顯示，并且在你修復之后會再次打包。 0x001 概述其實我不知道怎么寫，所以決定就一塊一塊的寫點平常配置的過程，根據不同東西稍微分區一下就好了 0x002 初始化項目結構 $ mkdir webpack_study $ cd webp...

Turbo 2019-08-21 17:27 評論0 收藏0
從零開始的webpack生活-0x015：ExtractTextWebpackPlugin分離樣式

摘要：概述上一章講的是，這一章講的是依舊是沒有任何關系。配合插件自動插入修改配置打包并查看它以的形式被插入頭部多入口文件打包添加入口修改插件命名方式打包并查看更多用法，請查閱關于章節資源源代碼 0x001 概述上一章講的是Dll，這一章講的是ExtractTextWebpackPlugin,依舊是沒有任何關系。 0x002 插件介紹這個插件用來將css導出到單獨文件 0x003 栗子-不...

Jonathan Shieber 2019-08-21 17:29 評論0 收藏0
從零開始的webpack生活-0x008：DLL加速編譯

摘要：概述上一章講的是，和這一章依舊沒有絲毫關系，這一章講的是和。插件介紹這個插件啊，用來預打包一些第三方庫，因為他們不經常修改，而每次我們引用他們之后都要將他們不斷的打包一次又一次，不但浪費了調試編譯的時間，還浪費了時間。 0x001 概述上一章講的是CommonChunkPlugin，和這一章依舊沒有絲毫關系，這一章講的是DllPlugin和DllReferencePlugin。 0x...

ityouknow 2019-08-21 17:29 評論0 收藏0
從零開始的webpack生活-0x011：StylingLoader裝載樣式

0x001 概述上一章講的是裝載模板，這一章講的是裝載樣式 0x002 配置環境 $ mkdir 0x011-styling-loader $ cd 0x011-styling-loader $ npm init -y $ npm install --save-dev webpack $ touch ./src/index.js $ vim webpack.config.js // ./web...

mylxsw 2019-08-21 17:31 評論0 收藏0
從零開始的webpack生活-0x009：FilesLoader裝載文件

摘要：修改配置文件匹配的文件名，這里匹配后綴為的，只要了該文件名結尾的文件，都將使用這個來處理命中后使用的加載器查看結果，和之前一致，推薦使用配置文件形式，可以保持引入文件格式的一致性。有利于維護和美觀更多配置，可以查閱關于部分。 0x001 概述上一章講的是DLL加速編譯，這一章開始講loader相關的部分，但是關于plugin的部分善未完結，因為即將要講的ExtractTextWebp...

NervosNetwork 2019-08-21 17:31 評論0 收藏0