当前项目结构
项目结构
其中
- 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 配置
Paste_Image.png
当配置 commonChunkPlugin 参数,结果如下:
Case 1
Paste_Image.png
命令行
Paste_Image.png
打包后
没有后缀
Case2
Paste_Image.png
命令行
Paste_Image.png
提出了公共js - init.js
Case3
Paste_Image.png
命令行
Paste_Image.png
Case4
Paste_Image.png
命令行
4
**assert 名称 和 chunk 名称 不一样了 **
Case5
5
命令行
Paste_Image.png
Case6
Paste_Image.png
命令行
Paste_Image.png
此时common.js中仅仅有module-require函数
Case7
Paste_Image.png
命令行
Paste_Image.png
此时common.js提取出了config.json和Greeter.js
Case8
Paste_Image.png
命令行
Paste_Image.png
common.js提取出了所有的js,此时 main.js 和 second.js中的代码仅有一行
webpackJsonp([0,1],[]);
Case9
Paste_Image.png
命令行
Paste_Image.png
**仅仅提出了 module-require 公共部分 ,其他公共模块并不抽取 **
Case 10
Paste_Image.png
命令行
Paste_Image.png
Case11
Paste_Image.png
命令行
Paste_Image.png