webpack中CommonsChunkPlugin详细教程(小结)(2)

日期：2020-05-12 栏目：程序人生 浏览：次

打包后文件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");

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