webpack CommonsChunkPlugin詳細教程

時間  2019-11-16
標籤 webpack commonschunkplugin 詳細 教程 简体版
原文   原文鏈接

1.demo結構：

2.package.json配置：

{
  "name": "webpack-simple-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.1.0",
    "vue": "^1.0.26"
  },
  "devDependencies": {
    "css-loader": "^0.24.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }
}

3.多種打包狀況(未使用CommonsChunkPlugin)

(1)單一入口，模塊單一引用

webpack.config.jsjavascript

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: 'build.js'
  },
  plugins: [
   
  ]
};

main.jscss

require("jquery");

demo目錄下運行命令行 webpack或npm run webpack

jquery模塊被一塊兒打包到build.jsvue

(2)單一入口，模塊重複引用

webpack.config.js不變，main.js：java

require("./chunk1");
require("./chunk2");

chunk1.js:jquery

require("./chunk2");
var chunk1=1;
exports.chunk1=chunk1;

chunk2.js:webpack

var chunk2=1;
exports.chunk2=chunk2;

main.js引用了chunk一、chunk2,chunk1又引用了chunk2，打包後：
build.js:web

...省略webpack生成代碼
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);
    __webpack_require__(2);


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

    __webpack_require__(2);
    var chunk1=1;
    exports.chunk1=chunk1;

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

    var chunk2=1;
    exports.chunk2=chunk2;

/***/ }
/******/ ]);

(3)多入口，模塊單一引用，分文件輸出

webpack.config.jsnpm

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
    main1:'./main1.js'
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'
  },
  plugins: [
   
  ]
};

打包後文件main.js,main1.js 內容與（2）build.js一致json

（4）多入口，模塊單一引用，單一文件輸出

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
    main1:'./main1.js'
  },
  output: {
    path:__dirname+'/dist',
    filename: 'buid.js'
  },
  plugins: [
   
  ]
};

build.js與（2）一致數組

（5）多入口，模塊重複引用，單文件輸出

webpack.config.js與（4）一致
main.js

require("./chunk1");
require("./chunk2");
exports.main=1;

main1.js

require("./chunk1");
require("./chunk2");
require("./main");

報錯：ERROR in ./main1.js
Module not found: Error: a dependency to an entry point is not allowed
@ ./main1.js 3:0-17

4.使用CommonsChunkPlugin

(1)單一入口，模塊單一引用，分文件輸出:
webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'//不使用[name]，而且插件中沒有filename，這輸出文件中只用chunk.js的內容， 
    main.js的內容不知跑哪裏去了
  },
  plugins: [
   new CommonsChunkPlugin({
       name:"chunk",
       filename:"chunk.js"//忽略則以name爲輸出文件的名字，不然以此爲輸出文件名字
   })
  ]
};

main.js

require("./chunk1");
require("./chunk2");
require("jquery");


輸出文件main.js chunk.js,chunk1.js,chunck2.js,jquery都被打包到main.js裏，好像並無什麼卵用，可是頁面上使用的時候chunk.js必須在mian.js前引用

將chunk1.js,chunck2.js打包到chunk.js:
webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
    chunk: ["./chunk1", "./chunk2"],//插件中name,filename必須以這個key爲值
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'//不使用[name]，而且插件中沒有filename，
    這輸出文件中只用chunk.js的內容，main.js的內容不知跑哪裏去了
  },
  plugins: [
   new CommonsChunkPlugin({
       name:"chunk",
      // filename:"chunk.js"//忽略則以name爲輸出文件的名字，不然以此爲輸出文件名字
   })
  ]
};

(1)單一入口，模塊重複引用，分文件輸出(單一入口CommonsChunkPlugin可否將屢次引用的模塊打包到公共模塊呢？)：

webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
    //main1:'./main1.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'//不使用[name]，而且插件中沒有filename，
這輸出文件中只用chunk.js的內容，main.js的內容不知跑哪裏去了
  },
  plugins: [
   new CommonsChunkPlugin({
       name:"chunk",
      // filename:"chunk.js"//忽略則以name爲輸出文件的名字，不然以此爲輸出文件名字
      minChunks:2
   })
  ]
};

main.js

require("./chunk1");
require("./chunk2");

chunk1.js

require("./chunk2");
var chunk1=1;
exports.chunk1=chunk1;

chunk2模塊被引用了兩次
打包後，全部模塊仍是被打包到main.js中

(3)多入口，模塊重複引用，分文件輸出（將屢次引用的模塊打包到公共模塊）

webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: 
  {
    main:'./main.js',
    main1:'./main1.js',
  },
  output: {
    path:__dirname+'/dist',
    filename: '[name].js'//不使用[name]，而且插件中沒有filename，
    這輸出文件中只用chunk.js的內容，main.js的內容不知跑哪裏去了
  },
  plugins: [
   new CommonsChunkPlugin({
       name:"chunk",
      // filename:"chunk.js"//忽略則以name爲輸出文件的名字，不然以此爲輸出文件名字
      minChunks:2
   })
  ]
};

main.js,main1.js裏都引用chunk1,chunk2.
打包後：
chunk1,chunk2被打包到chunk.js,再也不像3(3)chunk1,chunk2分別被打包到mian,mian1中。

5.將公共業務模塊與類庫或框架分開打包

webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {
        main: './main.js',
        main1: './main1.js',
        common1: ['jquery'],
        common2: ['vue']
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'//不使用[name]，而且插件中沒有filename，
        //這輸出文件中只用chunk.js的內容，main.js的內容不知跑哪裏去了
    },
    plugins: [
        new CommonsChunkPlugin({
            name: ["chunk","common1","common2"],//頁面上使用的時候common2
            //必須最早加載
            // filename:"chunk.js"//忽略則以name爲輸出文件的名字，
                //不然以此爲輸出文件名字
            minChunks: 2
        })
    ]
};


jquery被打包到common1.js,vue被打包到common2.js,chunk.js打包的是公共的業務模塊(webpack用插件CommonsChunkPlugin進行打包的時候，將符合引用次數(minChunks)的模塊打包到name參數的數組的第一個塊裏（chunk）,而後數組後面的塊依次打包(查找entry裏的key,沒有找到相關的key就生成一個空的塊)，最後一個塊包含webpack生成的在瀏覽器上使用各個塊的加載代碼，因此頁面上使用的時候最後一個塊必須最早加載)
將webpack.config.js改成

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {

        main: './main.js',
        main1: './main1.js',
        jquery:["jquery"],
        vue:["vue"]
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
            name: ["common","jquery","vue","load"],

            minChunks:2

        })
    ]
};

main.js

require("./chunk1");
require("./chunk2");
var jq=require("jquery");
console.log(jq);

main1.js

require("./chunk1");
require("./chunk2");
var vue=require("vue");
console.log(vue);
exports.vue=vue;

打包後

common.js

webpackJsonp([4,5],[
/* 0 */,
/* 1 */,
/* 2 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(3);
    var chunk1=1;
    exports.chunk1=chunk1;

/***/ },
/* 3 */
/***/ function(module, exports) {

    var chunk2=1;
    exports.chunk2=chunk2;

/***/ }
]);

至關於公共的業務代碼都打包到了common.js裏
load.js

/******/ (function(modules) { // webpackBootstrap
/******/     // install a JSONP callback for chunk loading
/******/     var parentJsonpFunction = window["webpackJsonp"];
/******/     window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/         // add "moreModules" to the modules object,
/******/         // then flag all "chunkIds" as loaded and fire callback
/******/         var moduleId, chunkId, i = 0, callbacks = [];
/******/         for(;i < chunkIds.length; i++) {
/******/             chunkId = chunkIds[i];
/******/             if(installedChunks[chunkId])
/******/                 callbacks.push.apply(callbacks, installedChunks[chunkId]);
/******/             installedChunks[chunkId] = 0;
/******/         }
/******/         for(moduleId in moreModules) {
/******/             modules[moduleId] = moreModules[moduleId];
/******/         }
/******/         if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules);
/******/         while(callbacks.length)
/******/             callbacks.shift().call(null, __webpack_require__);
/******/         if(moreModules[0]) {
/******/             installedModules[0] = 0;
/******/             return __webpack_require__(0);
/******/         }
/******/     };

/******/     // The module cache
/******/     var installedModules = {};

/******/     // object to store loaded and loading chunks
/******/     // "0" means "already loaded"
/******/     // Array means "loading", array contains callbacks
/******/     var installedChunks = {
/******/         5:0
/******/     };

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }

/******/     // This file contains only the entry chunk.
/******/     // The chunk loading function for additional chunks
/******/     __webpack_require__.e = function requireEnsure(chunkId, callback) {
/******/         // "0" is the signal for "already loaded"
/******/         if(installedChunks[chunkId] === 0)
/******/             return callback.call(null, __webpack_require__);

/******/         // an array means "currently loading".
/******/         if(installedChunks[chunkId] !== undefined) {
/******/             installedChunks[chunkId].push(callback);
/******/         } else {
/******/             // start chunk loading
/******/             installedChunks[chunkId] = [callback];
/******/             var head = document.getElementsByTagName('head')[0];
/******/             var script = document.createElement('script');
/******/             script.type = 'text/javascript';
/******/             script.charset = 'utf-8';
/******/             script.async = true;

/******/             script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"jquery","1":"main","2":"main1","3":"vue","4":"common"}[chunkId]||chunkId) + ".js";
/******/             head.appendChild(script);
/******/         }
/******/     };

/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";
/******/ })
/************************************************************************/
/******/ ([]);

使用的時候必須最早加載load.js

6.參數minChunks: Infinity

看一下下面的配置會是什麼結果

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {

        main: './main.js',
        main1: './main1.js',
        jquery:["jquery"]
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
            name: "jquery",

            minChunks:2

        })
    ]
};


main.js,main1.js共同引用的chunk1和chunk2會被打包到jquery.js裏

minChunks:2修改成minChunks:Infinity後，chunk1和chunk2都打包到main.js,main1.js裏

7.參數chunks

webpack.config.js

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
    entry: {

        main: './main.js',
        main1: './main1.js',
        jquery:["jquery"]
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].js'
    },
    plugins: [
        new CommonsChunkPlugin({
            name: "jquery",

            minChunks:2,

            chunks:["main","main1"]

        })
    ]
};

只有在main.js和main1.js中都引用的模塊纔會被打包的到公共模塊（這裏即jquery.js）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程