您的當(dāng)前位置：首頁(yè)webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))

webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))

來(lái)源：九壹網(wǎng)

本文介紹了webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))，分享給大家，也給自己留個(gè)筆記，具體如下：

1.demo結(jié)構(gòu)：

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目錄下運(yùn)行命令行 webpack或npm run webpack

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

(2)單一入口，模塊重復(fù)引用

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 內(nèi)容與（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）多入口，模塊重復(fù)引用，單文件輸出

webpack.config.js與（4）一致

main.js

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

main1.js

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

報(bào)錯(cuò)：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]，并且插件中沒(méi)有filename，這

輸出文件中只用chunk.js的內(nèi)容， main.js的內(nèi)容不知跑哪里去了 }, plugins: [ new CommonsChunkPlugin({ name:"chunk", filename:"chunk.js"http://忽略則以name為輸出文件的名字，否則以此為輸出文件名字 }) ] };

main.js

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

輸出文件main.js chunk.js,chunk1.js,chunck2.js,jquery都被打包到main.js里，好像并沒(méi)有什么卵用，但是頁(yè)面上使用的時(shí)候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必須以這個(gè)key為值
 },
 output: {
 path:__dirname+'/dist',
 filename: '[name].js'//不使用[name]，并且插件中沒(méi)有filename，
 這

輸出文件中只用chunk.js的內(nèi)容，main.js的內(nèi)容不知跑哪里去了 }, plugins: [ new CommonsChunkPlugin({ name:"chunk", // filename:"chunk.js"http://忽略則以name為輸出文件的名字，否則以此為輸出文件名字 }) ] };

(1)單一入口，模塊重復(fù)引用，分文件輸出(單一入口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]，并且插件中沒(méi)有filename，
這

輸出文件中只用chunk.js的內(nèi)容，main.js的內(nèi)容不知跑哪里去了 }, plugins: [ new CommonsChunkPlugin({ name:"chunk", // filename:"chunk.js"http://忽略則以name為輸出文件的名字，否則以此為輸出文件名字 minChunks:2 }) ] };

main.js

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

chunk1.js

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

chunk2模塊被引用了兩次

打包后，所有模塊還是被打包到main.js中

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

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]，并且插件中沒(méi)有filename，
 這

main.js,main1.js里都引用chunk1,chunk2.

打包后：

chunk1,chunk2被打包到chunk.js,不再像3(3)chunk1,chunk2分別被打包到mian,mian1中。

5.將公共業(yè)務(wù)模塊與類庫(kù)或框架分開(kāi)打包

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]，并且插件中沒(méi)有filename，
 //這

輸出文件中只用chunk.js的內(nèi)容，main.js的內(nèi)容不知跑哪里去了 }, plugins: [ new CommonsChunkPlugin({ name: ["chunk","common1","common2"],//頁(yè)面上使用的時(shí)候common2 //必須最先加載 // filename:"chunk.js"http://忽略則以name為輸出文件的名字， //否則以此為輸出文件名字 minChunks: 2 }) ] };

jquery被打包到common1.js,vue被打包到common2.js,chunk.js打包的是公共的業(yè)務(wù)模塊(webpack用插件CommonsChunkPlugin進(jìn)行打包的時(shí)候，將符合引用次數(shù)(minChunks)的模塊打包到name參數(shù)的數(shù)組的第一個(gè)塊里（chunk）,然后數(shù)組后面的塊依次打包(查找entry里的key,沒(méi)有找到相關(guān)的key就生成一個(gè)空的塊)，最后一個(gè)塊包含webpack生成的在瀏覽器上使用各個(gè)塊的加載代碼，所以頁(yè)面上使用的時(shí)候最后一個(gè)塊必須最先加載)

將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;

/***/ }
]);

相當(dāng)于公共的業(yè)務(wù)代碼都打包到了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 = "";
/******/ })
/************************************************************************/
/******/ ([]);

使用的時(shí)候必須最先加載load.js

6.參數(shù)minChunks: Infinity

看一下下面的配置會(huì)是什么結(jié)果

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會(huì)被打包到j(luò)query.js里

minChunks:2修改為minChunks:Infinity后，chunk1和chunk2都打包到main.js,main1.js里

7.參數(shù)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中都引用的模塊才會(huì)被打包的到公共模塊（這里即jquery.js）

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

webpack中CommonsChunkPlugin詳細(xì)教程(小結(jié))