webpack中CommonsChunkPlugin详细教程(小结)

程序员文章站 2024-01-17 15:08:22

本文介绍了webpack中commonschunkplugin详细教程(小结)，分享给大家，也给自己留个笔记，具体如下： 1.demo结构： 2.package.j...

本文介绍了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.js

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

main.js

require("jquery");

demo目录下运行命令行 webpack或npm run webpack

webpack中CommonsChunkPlugin详细教程(小结)

jquery模块被一起打包到build.js

(2)单一入口，模块重复引用

webpack.config.js不变，main.js：

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

chunk1.js:

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

chunk2.js:

var chunk2=1;
exports.chunk2=chunk2;

main.js引用了chunk1、chunk2,chunk1又引用了chunk2，打包后：

build.js:

 ...省略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.js

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一致

（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");

webpack中CommonsChunkPlugin详细教程(小结)

输出文件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为输出文件的名字，否则以此为输出文件名字
  })
 ]
};

webpack中CommonsChunkPlugin详细教程(小结)

(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
    })
  ]
};

webpack中CommonsChunkPlugin详细教程(小结)

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;

打包后

webpack中CommonsChunkPlugin详细教程(小结)

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

    })
  ]
};

webpack中CommonsChunkPlugin详细教程(小结)

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）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： JavaScript实现焦点进入文本框内关闭输入法的核心代码

下一篇： JScript中正则表达函数的说明与应用

webpack中CommonsChunkPlugin详细教程(小结)

webpack中CommonsChunkPlugin详细教程(小结)

在Linux系统中安装Go语言的详细教程

Ai中怎么绘制竹林?Ai画竹子的详细教程

详细解读在JavaScript中实现设计模式中的适配器模式的方法（图文教程）

详细介绍Session在PHP中的使用(1)_PHP教程

在MySQL中实现二分查找的详细教程_MySQL

关于session在PHP5的配置文件中的详细设置参数说明_PHP教程

php中的PHP_EOL换行符详细解析_PHP教程

在node.js中多个异步过程中如何判断执行是否完成（详细教程）

PHP在网页中动态生成PDF文件详细教程