Skip to content

Commit e18ac86

Browse files
author
ubuntu
committedJan 12, 2016
common-chunks-plugin and config
1 parent fa3441d commit e18ac86

File tree

13 files changed

+269
-1
lines changed

13 files changed

+269
-1
lines changed
 

‎examples/chapter3/common-chunks-plugin/example3/a.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
sayHello:function(){
3+
console.log('Hello World! I\'m a!');
4+
}
5+
};

‎examples/chapter3/common-chunks-plugin/example3/b.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
sayHello:function(){
3+
console.log('Hello World! I\'m b!');
4+
}
5+
};

‎examples/chapter3/common-chunks-plugin/example3/bundle.main1.js

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId])
10+
/******/ return installedModules[moduleId].exports;
11+
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ exports: {},
15+
/******/ id: moduleId,
16+
/******/ loaded: false
17+
/******/ };
18+
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
22+
/******/ // Flag the module as loaded
23+
/******/ module.loaded = true;
24+
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
29+
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
35+
36+
/******/ // __webpack_public_path__
37+
/******/ __webpack_require__.p = "";
38+
39+
/******/ // Load entry module and return exports
40+
/******/ return __webpack_require__(0);
41+
/******/ })
42+
/************************************************************************/
43+
/******/ ([
44+
/* 0 */
45+
/***/ function(module, exports, __webpack_require__) {
46+
47+
var a=__webpack_require__(1);
48+
a.sayHello();
49+
50+
51+
var b = __webpack_require__(2);
52+
b.sayHello();
53+
54+
var c = __webpack_require__(3);
55+
c.sayHello();
56+
57+
58+
59+
/***/ },
60+
/* 1 */
61+
/***/ function(module, exports) {
62+
63+
module.exports = {
64+
sayHello:function(){
65+
console.log('Hello World! I\'m a!');
66+
}
67+
};
68+
69+
/***/ },
70+
/* 2 */
71+
/***/ function(module, exports) {
72+
73+
module.exports = {
74+
sayHello:function(){
75+
console.log('Hello World! I\'m b!');
76+
}
77+
};
78+
79+
/***/ },
80+
/* 3 */
81+
/***/ function(module, exports) {
82+
83+
module.exports = {
84+
sayHello:function(){
85+
console.log('Hello World! I\'m c!');
86+
}
87+
};
88+
89+
/***/ }
90+
/******/ ]);

‎examples/chapter3/common-chunks-plugin/example3/bundle.main2.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId])
10+
/******/ return installedModules[moduleId].exports;
11+
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ exports: {},
15+
/******/ id: moduleId,
16+
/******/ loaded: false
17+
/******/ };
18+
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
22+
/******/ // Flag the module as loaded
23+
/******/ module.loaded = true;
24+
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
29+
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
35+
36+
/******/ // __webpack_public_path__
37+
/******/ __webpack_require__.p = "";
38+
39+
/******/ // Load entry module and return exports
40+
/******/ return __webpack_require__(0);
41+
/******/ })
42+
/************************************************************************/
43+
/******/ ([
44+
/* 0 */
45+
/***/ function(module, exports, __webpack_require__) {
46+
47+
var a=__webpack_require__(1);
48+
a.sayHello();
49+
50+
51+
var b = __webpack_require__(2);
52+
b.sayHello();
53+
54+
55+
/***/ },
56+
/* 1 */
57+
/***/ function(module, exports) {
58+
59+
module.exports = {
60+
sayHello:function(){
61+
console.log('Hello World! I\'m a!');
62+
}
63+
};
64+
65+
/***/ },
66+
/* 2 */
67+
/***/ function(module, exports) {
68+
69+
module.exports = {
70+
sayHello:function(){
71+
console.log('Hello World! I\'m b!');
72+
}
73+
};
74+
75+
/***/ }
76+
/******/ ]);

‎examples/chapter3/common-chunks-plugin/example3/c.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
sayHello:function(){
3+
console.log('Hello World! I\'m c!');
4+
}
5+
};

‎examples/chapter3/common-chunks-plugin/example3/index.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>webpack.toobug.net</title>
6+
<script src="./common.js"></script>
7+
<script src="./bundle.main1.js"></script>
8+
</head>
9+
<body>
10+
11+
</body>
12+
</html>

‎examples/chapter3/common-chunks-plugin/example3/main.2.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var a=require('./a');
2+
a.sayHello();
3+
4+
5+
var b = require('./b');
6+
b.sayHello();

‎examples/chapter3/common-chunks-plugin/example3/main.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var a=require('./a');
2+
a.sayHello();
3+
4+
5+
var b = require('./b');
6+
b.sayHello();
7+
8+
var c = require('./c');
9+
c.sayHello();
10+

‎examples/chapter3/common-chunks-plugin/example3/package.json

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "example2",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "main.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"author": "",
10+
"license": "ISC",
11+
"dependencies": {
12+
"webpack": "^1.12.8"
13+
}
14+
}

‎examples/chapter3/common-chunks-plugin/example3/webpack.config.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
var webpack = require('webpack');
2+
3+
module.exports = {
4+
entry:{
5+
main1:'./main',
6+
main2:'./main.2'
7+
},
8+
output:{
9+
filename:'bundle.[name].js'
10+
},
11+
/*plugins: [
12+
new webpack.optimize.CommonsChunkPlugin({
13+
name:'main1',
14+
chunks: ['main1', 'main2'],
15+
async:true
16+
})*/
17+
]
18+
};

‎notes

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
http://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack
2+
http://alexomara.com/blog/webpack-and-jquery-include-only-the-parts-you-need/ 加载jquery及按需打包
3+
http://jonathancreamer.com/advanced-webpack-part-1-the-commonschunk-plugin/ commonschunk插件

‎zh-cn/chapter3/common-chunks-plugin.md

+16
Original file line numberDiff line numberDiff line change
@@ -85,3 +85,19 @@ bundle.main2.js 193 bytes 1 [emitted] main2
8585
运行时截图如下：
8686

8787
![../images/chapter3/common-chunks-plugin/1.png](../images/chapter3/common-chunks-plugin/1.png)
88+
89+
## 另一个问题
90+
91+
上面的代码成功地将公共模块`a`和`b`提取出来了。但不知道看到此处，你的心里是否会有点疑问。
92+
93+
如果你还没有的话，我们一起来看一下下面这些东东：
94+
95+
1. 什么是入口文件？如果你还记得前面我们给出的定义的话，就会发现，这个地方有两个入口文件！
96+
2. 模块化方案应该允许多个入口文件吗？应该吗？不应该吗？应该吗？不应该吗？
97+
3. 如果模块规划调整了，`common.js`消失了，或者增加了一个`common.2.js`，我应该修改每一个HTML引入的部分吗？
98+
99+
其实写到这里，我是有点迷茫的，按照我对模块化方案的认知，我的观点是：
100+
101+
1. 入口文件应该只有一个，其它的逻辑全部由入口文件处理，因此不应该允许多入口文件
102+
2. 模块规划应该在模块化方案内部完成，不应该还需要时时调整模块调用入口
103+

‎zh-cn/chapter3/config.md

+9-1
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,12 @@ bundle1.1.js 1.48 kB 0 [emitted] main
4242
[0] ./example1.1.js 83 bytes {0} [built]
4343
```
4444

45-
同时生成了`bundle1.1.js`，可见配置文件的确是生效了的。
45+
同时生成了`bundle1.1.js`，可见配置文件的确是生效了的。
46+
47+
### `output.filename`中的占位符
48+
49+
`output.filename`除了可以指定具体的文件名以外，还可以使用一些占位符，包括：
50+
51+
- `name` 模块名称
52+
- `hash` 模块编译后的Hash值
53+
- `chunkhash` 分片的哈希值

0 commit comments

Comments
 (0)