扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >webpack中CommonsChunkPlugin怎么用
  • 961

0
分享到

webpack中CommonsChunkPlugin怎么用

2024-04-02 19:04:59 961人浏览 安东尼
摘要

小编给大家分享一下webpack中CommonsChunkPlugin怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.d

小编给大家分享一下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生成代码

 ([

 function(module, exports, __webpack_require__) {

  __webpack_require__(1);
  __webpack_require__(2);


 },

 function(module, exports, __webpack_require__) {

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

 },

 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],[
,
,

 function(module, exports, __webpack_require__) {

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

 },

 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怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网VUE频道！

--结束END--

本文标题: webpack中CommonsChunkPlugin怎么用

本文链接: https://lsjlt.com/news/79544.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • webpack中CommonsChunkPlugin怎么用
    小编给大家分享一下webpack中CommonsChunkPlugin怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1.d...
    99+
    2024-04-02
  • 如何使用webpack的CommonsChunkPlugin提取公共代码
    这篇文章主要为大家展示了“如何使用webpack的CommonsChunkPlugin提取公共代码”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用webp...
    99+
    2024-04-02
  • webpack怎么用
    这篇文章主要介绍了webpack怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 webpack是基于node的。先安装最新的...
    99+
    2024-04-02
  • webpack中DLLPlugin和DLLReferencePlugin怎么用
    这篇文章主要为大家展示了“webpack中DLLPlugin和DLLReferencePlugin怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“webpa...
    99+
    2024-04-02
  • React+Webpack怎么用
    这篇文章主要为大家展示了“React+Webpack怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“React+Webpack怎么用”这篇文章吧。webst...
    99+
    2024-04-02
  • html-webpack-plugin怎么用
    这篇文章将为大家详细讲解有关html-webpack-plugin怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。html-webpack-plugin 可能用过的 ...
    99+
    2024-04-02
  • webpack-cli在webpack打包中的作用是什么
    这篇文章主要讲解了“webpack-cli在webpack打包中的作用是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“webpack-cli在webpack打包中的作用是什么”吧！web...
    99+
    2023-06-30
  • webpack中loader有什么用
    这篇文章主要介绍webpack中loader有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！一、loaders之 预处理css-loader 处理css中路径引用等问题styl...
    99+
    2024-04-02
  • extract-text-webpack-plugin怎么用
    这篇文章主要介绍了extract-text-webpack-plugin怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。extract-...
    99+
    2024-04-02
  • vue+webpack+express中间件接口怎么用
    这篇文章主要介绍vue+webpack+express中间件接口怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！环境：vue 2.9.3; webpack目的：接口的调用跨域方式...
    99+
    2024-04-02
  • vue中的webpack怎么安装
    今天小编给大家分享一下vue中的webpack怎么安装的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了...
    99+
    2024-04-02
  • webpack中的optimization怎么配置
    本篇内容主要讲解“webpack中的optimization怎么配置”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“webpack中的optimization怎么配置”吧!webpack配置opt...
    99+
    2023-07-05
  • vue中怎么使用webpack构建多页面
    vue中怎么使用webpack构建多页面，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。一、开发环境node v6.11.0二、...
    99+
    2024-04-02
  • Webpack loader之file-loader怎么用
    这篇文章主要为大家展示了“Webpack loader之file-loader怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Webpack loader之...
    99+
    2024-04-02
  • webpack中umd模块怎么引入
    在webpack中引入UMD模块，可以通过以下步骤：1. 安装UMD模块：使用npm或者yarn安装需要的UMD模块，例如：npm ...
    99+
    2023-10-19
    webpack
  • 怎么掌握webpack
    本篇内容介绍了“怎么掌握webpack”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！什么是webpack？...
    99+
    2024-04-02
  • webpack-cli在webpack打包中的作用小结
    目录webpack & webpack-cliwebpack Introductionwebpack-cli 详解Referencewebpack & webpack...
    99+
    2024-04-02
  • webpack中怎么实现代码分片
    webpack中怎么实现代码分片，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。CommonsChunkPlugin虽然这个插件在webpack4当中已经不推荐使...
    99+
    2023-06-20
  • webpack怎么打包CSS
    这篇“webpack怎么打包CSS”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“webpa...
    99+
    2024-04-02
  • 怎么理解Webpack HMR
    本篇内容主要讲解“怎么理解Webpack HMR”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么理解Webpack HMR”吧!一、HMR 介绍Hot Mod...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作