当前项目结构

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
项目结构

其中

  • Greeter.js 引用了 config.json
  • main.js 和 second.js 都引用了 Greeter.js
  • main.js 还引用了 onlyformain.js
  • second.js 还引用了 onlyforsecond.js

代码如下

// config.json
{
"greetText": "Hi there and greetings from JSON!"
} // Greeter.js
var config = require('./config.json');
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = config.greetText;
greet.innerText = config.greetText;
console.log(config.greetText)
return greet;
}; // main.js
import 'babel-polyfill'
import './OnlyForMain'
var greeter = require("./Greeter.js")
document.getElementById('root').appendChild(greeter());
console.log("this is from main.js") // second.js
import 'babel-polyfill'
import './OnlyForSecond'
var greeter = require("./Greeter.js")
document.getElementById('root').appendChild(greeter());
console.log("this is from second.js") // onlyformain.js
var config = require('./config.json');
module.exports = function() {
console.log("this is only for main")
return {};
}; // onlyforsecond.js
var config = require('./config.json');
module.exports = function() {
console.log("this is only for second")
return {};
};

webpack 配置

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

当配置 commonChunkPlugin 参数,结果如下:

Case 1

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

打包后

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
 

没有后缀

Case2

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

提出了公共js - init.js

Case3

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

Case4

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
4

**assert 名称 和 chunk 名称 不一样了 **

Case5

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
5

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

Case6

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

此时common.js中仅仅有module-require函数

Case7

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

此时common.js提取出了config.json和Greeter.js

Case8

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

common.js提取出了所有的js,此时 main.js 和 second.js中的代码仅有一行

webpackJsonp([0,1],[]);

Case9

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

**仅仅提出了 module-require 公共部分 ,其他公共模块并不抽取 **

Case 10

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

Case11

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

命令行

 
[转] Webpack-CommonsChunkPlugin-LMLPHP
Paste_Image.png

总结

05-11 11:15
查看更多