(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 }) ] };