首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

webpack中CommonsChunkPlugin详细教程(小结)

Posted in Javascript onNovember 09, 2017

本文介绍了webpack中CommonsChunkPlugin详细教程(小结)，分享给大家，也给自己留个笔记，具体如下：

1.demo结构：

webpack中CommonsChunkPlugin详细教程(小结)

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）

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

webpack中CommonsChunkPlugin详细教程(小结)

- Author -

wjkang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jsTree 基于JQuery的排序节点 Bug
Jul 26 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
jquery 使用简明教程
Mar 05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jQuery实现倒计时（倒计时年月日可自己输入）
Dec 02 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 #Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 #Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 #jQuery
简单实现jquery隔行变色
Nov 09 #jQuery
基于Datatables跳转到指定页的简单实例
Nov 09 #Javascript
浅谈vue2 单页面如何设置网页title
Nov 08 #Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 #jQuery
计划书(118) 答谢词(97) 保证书(97) 证明书(326) 感谢信(72) 评语(336) 制度(225) 寄语(276) 倡议书(159) 接收函(23)
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
《PHP编程最快明白》第八讲：php启发和小结
2010/11/01 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
Nginx上传文件全部缓存解决方案
2015/08/17 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
详谈javascript异步编程
2016/02/21 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
jQuery实现倒计时（倒计时年月日可自己输入）
2016/12/02 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
jquery动态赋值id与动态取id方法示例
2017/08/21 jQuery
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
js实现带有动画的返回顶部
2020/08/09 Javascript
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python实现批量下载文件
2015/05/17 Python
python使用win32com库播放mp3文件的方法
2015/05/30 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python读写docx文件的方法
2018/05/08 Python
Python 进程操作之进程间通过队列共享数据，队列Queue简单示例
2019/10/11 Python
python程序文件扩展名知识点详解
2020/02/27 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
10张动图学会python循环与递归问题
2021/02/06 Python
浅谈CSS3特性查询（Feature Query: @supports）功能简介
2017/07/31 HTML / CSS
Nisbets爱尔兰：英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
SmartBuyGlasses比利时：购买品牌太阳镜和眼镜
2019/08/09 全球购物
当当网软件测试笔试题
2015/11/24 面试题
元旦寄语大全
2014/04/10 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
小学语文教研活动总结
2014/07/01 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python