安科网

webpack中CommonsChunkPlugin详细教程(小结)

江木

江木

2017-11-09

关注 关注

本文介绍了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 教程

江木

江木

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

Vue2全家桶之一：vue-cli（vue脚手架）超详细教程

都说Vue2简单上手容易，的确，看了官方文档确实觉得上手很快，除了ES6语法和webpack的配置让你感到陌生，重要的是思路的变换，以前用jq随便拿全局变量和修改dom的锤子不能用了，vue只用关心数据本身，不用再频繁繁琐的操作dom，注册事件、监听事件、

helloxiaoliang 2020-06-21

带你使用webpack快速构建web项目的方法

使用webpack构建web项目以及热部署插件的使用，按以下步骤，能帮助你快速构建和理解~详细学习还得靠官方文档！你得先安装了Node.js此处不赘述。使用此插件我们将会自动在打包的时候创建index.html，且无须关心bundle.js的文件路径。打包

不知道该写啥QAQ 2020-11-12

Webpack的Loader和Plugin的区别

用于对模块源码的转换，loader描述了webpack如何处理非javascript模块，并且在buld中引入这些依赖。loader可以将文件从不同的语言转换为JavaScript，或者将内联图像转换为data URL。module.rules可以指定多个

webfullStack 2020-11-09

vscode 调试 node.js的方法步骤

作为前端工程师经常打交道的开发工具无非 IDE 编辑器 和 Chrome，在 Chrome 中调试是非常方便的，直接在 开发者工具的 source 栏打断点就可以了。那么，如果遇到需要写 node 相关的代码，比如 webpack 配置项，应该怎么调试来实

Yvettre 2020-09-15

如何用5分钟开发一个 Webpack Loader？

今天分享的内容是如何开发一个简单的Webpack Loader，希望通过这个过程能够让你 Get 到 Webpack Loader 的工作原理与机制。这里我的需求是开发一个可以加载 markdown 文件的加载器，以便可以在代码中直接导入 md 文件。我们

想做大牛的蜗牛 2020-10-30

为 Vue 的惰性加载加一个进度条

通常用 Vue.js 编写单页应用时，当加载页面时，所有必需的资源都会被一起加载。在处理大文件时，这可能会导致用户体验不佳。借助 Webpack，可以用 import() 函数而不是 import 关键字在 Vue.js 中按需加载页面。Vue.js 中

gloria0 2020-10-26

详解webpack的文件监听实现(热更新)

文件监听是在源码发生变化时，自动重新构建出新的输出文件。"test": "echo \"Error: no test specified\" && exit 1",

gaojie0 2020-09-11

Runoob-ES6：ES6 环境搭建

目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。如果你还不了解 No

SelinaChan 2020-08-14

配置webpack

在全局安装webpack: npm install webpack -g. 在项目的根目录创建一个 webpack.config.js. // entry: 打包的入口文件，一个字符串或者一个对象。// output: 配置打包的结果，一个对象。// f

不知道该写啥QAQ 2020-08-09

vue—cli脚手架

使用npm全局安装webpack，打开命令行工具输入：npm install webpack -g或者，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。注意：webpack 4.X 开始，需要安装 webpack-cl

gloria0 2020-08-09

Webpack 原理浅析

Webpack迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的Webpack。假设某一天，我们接到

不知道该写啥QAQ 2020-08-02

第一个Vue页面

安装完后，打开cmd命令行界面。安装yarn(fackbook依赖管理工具与Npm功能一样，推荐使用！！！--- 是否安装vue路由 -->. --- 是否启动ESLint代码检测 -->. --- 是否设置单元测试 -->. --- 是

hline 2020-07-29

webpack之常用plugin的配置和使用

html-webpack-plugin插件默认会创建一个HTML模板，并自动引入打包生成的几个主要的chunk包

SelinaChan 2020-07-28

【webpack】webpack打包之后调试源码

注释掉的UglifyJsPlugin用于js打包、压缩、混淆

yqoxygen 2020-07-28

ABAP, UI5和webpack的处理入口

如果一个UI5应用配置到portal的Fiori Launchpad里,那么应用的入口是Component.js. 另一种方式不需要launchpad，只需要在一个standalone的html里自己新建一个component的运行环境:. 那么只需要关注

wangdianyong 2020-07-23

ABAP, Maven, CF App和Webpack的build

命令行mvn clean install后，生成的jar文件默认位于target folder下。在包含了这个yaml文件的folder里使用cf push，因为里面指定了java_buildpack作为buildpack，应用upload到cloud f

webpackvuees 2020-07-23

vue.js 安装

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。This will install Vue 2.x version of the

yqoxygen 2020-07-20

基于vue-cli搭建vue项目开发环境

vue-cli是vue的脚手架工具，用于快速搭建vue项目。让开发者只关心项目本身，而不去关注项目的开发环境。在安装vue-cli之前，我们先安装webpack，在命令行工具输入下面代码。，这里就默认你安装node.js. webpack-simple

不知道该写啥QAQ 2020-07-18

06、Webpack使用loader配置css文件、图片文件、

loader 让 webpack 能够去处理那些非 JavaScript 文件。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader

waterv 2020-07-18

Ant-design中使用jQuery

‘window.jQuery‘: ‘jquery‘,上面代码使用了 webpack 的 ProvidePlugin 插件，这个插件在加载某个模块时，如果遇到了未定义的并且在配置文件中配置了的变量，比如上面代码看到的 $、jquery、jQuery、wind

81463166 2020-07-17
江木

江木

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号