Skip to content

Commit 6db185e

Browse files
author
caoli
committed
feat: use easywebpack 4
1 parent 2108212 commit 6db185e

File tree

4 files changed

+296
-25
lines changed

4 files changed

+296
-25
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# egg-react-webpack-boilerplate
22

3-
基于 Egg + React + Webpack3 多页面和单页面服务器渲染同构工程骨架项目, 文档请见: [Egg+React解决方案](http://hubcarl.github.io/easywebpack/react/dev/)
3+
基于 Egg + React + Webpack4 多页面和单页面服务器渲染同构工程骨架项目, 文档请见: [Egg+React解决方案](http://hubcarl.github.io/easywebpack/react/dev/)
44

55
- Egg 版本: ^2.x.x
66
- Node 版本: Node ^8.x.x+, Node 6.x.x 版本请见 [Egg 1.0 + Node6分支](https://github.com/hubcarl/egg-react-webpack-boilerplate/tree/node6)
7-
- Webpack 版本: ^3.10.0, 对应 `easywebpack-react` 版本为 3.5.0, Webpack2 版本项目骨架请见 `feature/webpack2` 分支, 对应 `easywebpack-react` 版本为 1.0.0
7+
- Webpack 版本: ^4.x.x, 对应 `easywebpack-react` 版本为 4.x.x, Webpack3 版本项目骨架请见 `webpack3` 分支, 对应 `easywebpack-react` 版本为 3.x.x
88
- React 版本: ^15.0.0, ^16.0.0,
99
- 最新变更说明: [RELEASE](RELEASE.md)
1010
- 如果你需要了解 Egg + React + Webpack 项目更多信息,请扫以下二维码加 QQ 好友,请备注:Node.js

package.json

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{
22
"name": "egg-react-webpack-boilerplate",
3-
"version": "3.6.3",
3+
"version": "4.0.0-rc.1",
44
"description": "基于 easywebpack-react 和 egg-view-react-ssr 插件服务端渲染工程骨架项目",
55
"scripts": {
6+
"postinstall": "node ./script/postinstall.js",
67
"build": "cross-env easywebpack build prod",
78
"build:test": "cross-env easywebpack build test",
89
"build:prod": "cross-env easywebpack build prod",
@@ -11,9 +12,11 @@
1112
"start:prod": "cross-env EGG_SERVER_ENV=prod node index.js",
1213
"kill-port": "kill -9 $(lsof -i:8888 |grep 'node'|aw '{print $2}') ",
1314
"lint": "eslint .",
14-
"fix": "eslint --fix ."
15+
"fix": "eslint --fix .",
16+
"ii": "npm install --registry https://registry.npm.taobao.org"
1517
},
1618
"dependencies": {
19+
"cross-env": "^5.0.0",
1720
"egg": "^2.1.0",
1821
"egg-cors": "^2.0.0",
1922
"egg-logger": "^1.5.0",
@@ -27,7 +30,11 @@
2730
"react": "^16.0.0",
2831
"react-dom": "^16.0.0",
2932
"react-router": "^4.2.0",
30-
"react-router-config": "^1.0.0-beta.4"
33+
"react-router-config": "^1.0.0-beta.4",
34+
"react-redux": "^5.0.6",
35+
"react-router-dom": "^4.2.2",
36+
"react-router-redux": "^4.0.8",
37+
"redux": "^3.7.2"
3138
},
3239
"devDependencies": {
3340
"antd": "^3.0.3",
@@ -42,42 +49,27 @@
4249
"babel-plugin-transform-object-rest-spread": "^6.26.0",
4350
"babel-preset-env": "^1.6.0",
4451
"babel-preset-react": "^6.24.1",
45-
"cross-env": "^5.0.0",
46-
"directory-named-webpack-plugin": "^2.2.3",
47-
"easywebpack-cli": "^3.5.0",
48-
"easywebpack-react": "^3.5.0",
49-
"egg-webpack": "^3.2.4",
52+
"easywebpack-cli": "^3.7.0",
53+
"easywebpack-react": "next",
54+
"egg-webpack": "next",
5055
"egg-webpack-react": "^2.0.0",
51-
"eslint": "^4.6.1",
5256
"eslint-config-egg": "^5.1.1",
53-
"eslint-loader": "^1.9.0",
5457
"eslint-plugin-react": "^7.1.0",
55-
"history": "^4.7.2",
56-
"html-webpack-plugin": "^2.30.1",
5758
"imagemin-webpack-plugin": "^1.5.2",
5859
"ip": "^1.1.5",
5960
"less": "^2.7.2",
6061
"less-loader": "^4.0.5",
6162
"node-sass": "^4.6.0",
6263
"postcss-loader": "^2.0.8",
63-
"progress-bar-webpack-plugin": "^1.10.0",
64-
"react-redux": "^5.0.6",
65-
"react-router": "^4.2.0",
66-
"react-router-dom": "^4.2.2",
67-
"react-router-redux": "^4.0.8",
68-
"redux": "^3.7.2",
6964
"sass-loader": "^6.0.6",
7065
"stylus": "^0.54.5",
71-
"stylus-loader": "^3.0.1",
72-
"uglifyjs-webpack-plugin": "^1.1.2",
73-
"vconsole": "^3.0.0",
74-
"webpack-manifest-resource-plugin": "^2.0.2"
66+
"stylus-loader": "^3.0.1"
7567
},
7668
"engines": {
7769
"node": ">=6.0.0"
7870
},
7971
"ci": {
80-
"version": "6, 7, 8"
72+
"version": "6, 8, 9"
8173
},
8274
"repository": {
8375
"type": "git",

script/postinstall.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
'use strict';
2+
const path = require('path');
3+
const fs = require('fs');
4+
const source = path.join(process.cwd(), 'script/webpack4/webpack/lib/node/NodeMainTemplatePlugin.js');
5+
const target = path.join(process.cwd(), 'node_modules/webpack/lib/node/NodeMainTemplatePlugin.js');
6+
fs.createReadStream(source).pipe(fs.createWriteStream(target));
Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
/*
2+
MIT License http://www.opensource.org/licenses/mit-license.php
3+
Author Tobias Koppers @sokra
4+
*/
5+
"use strict";
6+
7+
const Template = require("../Template");
8+
9+
module.exports = class NodeMainTemplatePlugin {
10+
constructor(asyncChunkLoading) {
11+
this.asyncChunkLoading = asyncChunkLoading;
12+
}
13+
14+
apply(mainTemplate) {
15+
const needChunkOnDemandLoadingCode = chunk => {
16+
for (const chunkGroup of chunk.groupsIterable) {
17+
if (chunkGroup.getNumberOfChildren() > 0) return true;
18+
}
19+
return false;
20+
};
21+
const asyncChunkLoading = this.asyncChunkLoading;
22+
mainTemplate.hooks.localVars.tap(
23+
"NodeMainTemplatePlugin",
24+
(source, chunk) => {
25+
if (needChunkOnDemandLoadingCode(chunk)) {
26+
return Template.asString([
27+
source,
28+
"",
29+
"// object to store loaded chunks",
30+
'// "0" means "already loaded"',
31+
"var installedChunks = {",
32+
Template.indent(chunk.ids.map(id => `${JSON.stringify(id)}: 0`).join(",\n")),
33+
"};"
34+
]);
35+
}
36+
return source;
37+
}
38+
);
39+
mainTemplate.hooks.requireExtensions.tap(
40+
"NodeMainTemplatePlugin",
41+
(source, chunk) => {
42+
if (needChunkOnDemandLoadingCode(chunk)) {
43+
return Template.asString([
44+
source,
45+
"",
46+
"// uncaught error handler for webpack runtime",
47+
`${mainTemplate.requireFn}.oe = function(err) {`,
48+
Template.indent([
49+
"process.nextTick(function() {",
50+
Template.indent(
51+
"throw err; // catch this error by using import().catch()"
52+
),
53+
"});"
54+
]),
55+
"};"
56+
]);
57+
}
58+
return source;
59+
}
60+
);
61+
mainTemplate.hooks.requireEnsure.tap(
62+
"NodeMainTemplatePlugin",
63+
(source, chunk, hash) => {
64+
const chunkFilename = mainTemplate.outputOptions.chunkFilename;
65+
const chunkMaps = chunk.getChunkMaps();
66+
const insertMoreModules = [
67+
"var moreModules = chunk.modules, chunkIds = chunk.ids;",
68+
"for(var moduleId in moreModules) {",
69+
Template.indent(
70+
mainTemplate.renderAddModule(
71+
hash,
72+
chunk,
73+
"moduleId",
74+
"moreModules[moduleId]"
75+
)
76+
),
77+
"}"
78+
];
79+
if (asyncChunkLoading) {
80+
return Template.asString([
81+
source,
82+
"",
83+
"// ReadFile + VM.run chunk loading for javascript",
84+
"",
85+
"var installedChunkData = installedChunks[chunkId];",
86+
'if(installedChunkData !== 0) { // 0 means "already installed".',
87+
Template.indent([
88+
'// array of [resolve, reject, promise] means "currently loading"',
89+
"if(installedChunkData) {",
90+
Template.indent(["promises.push(installedChunkData[2]);"]),
91+
"} else {",
92+
Template.indent([
93+
"// load the chunk and return promise to it",
94+
"var promise = new Promise(function(resolve, reject) {",
95+
Template.indent([
96+
"installedChunkData = installedChunks[chunkId] = [resolve, reject];",
97+
"var filename = __dirname + " +
98+
mainTemplate.getAssetPath(
99+
JSON.stringify(`/${chunkFilename}`),
100+
{
101+
hash: `" + ${mainTemplate.renderCurrentHashCode(
102+
hash
103+
)} + "`,
104+
hashWithLength: length =>
105+
`" + ${mainTemplate.renderCurrentHashCode(
106+
hash,
107+
length
108+
)} + "`,
109+
chunk: {
110+
id: '" + chunkId + "',
111+
hash: `" + ${JSON.stringify(
112+
chunkMaps.hash
113+
)}[chunkId] + "`,
114+
hashWithLength: length => {
115+
const shortChunkHashMap = {};
116+
for (const chunkId of Object.keys(chunkMaps.hash)) {
117+
if (typeof chunkMaps.hash[chunkId] === "string")
118+
shortChunkHashMap[chunkId] = chunkMaps.hash[
119+
chunkId
120+
].substr(0, length);
121+
}
122+
return `" + ${JSON.stringify(
123+
shortChunkHashMap
124+
)}[chunkId] + "`;
125+
},
126+
name: `" + (${JSON.stringify(
127+
chunkMaps.name
128+
)}[chunkId]||chunkId) + "`
129+
}
130+
}
131+
) +
132+
";",
133+
"require('fs').readFile(filename, 'utf-8', function(err, content) {",
134+
Template.indent(
135+
[
136+
"if(err) return reject(err);",
137+
"var chunk = {};",
138+
"require('vm').runInThisContext('(function(exports, require, __dirname, __filename) {' + content + '\\n})', filename)" +
139+
"(chunk, require, require('path').dirname(filename), filename);"
140+
]
141+
.concat(insertMoreModules)
142+
.concat([
143+
"var callbacks = [];",
144+
"for(var i = 0; i < chunkIds.length; i++) {",
145+
Template.indent([
146+
"if(installedChunks[chunkIds[i]])",
147+
Template.indent([
148+
"callbacks = callbacks.concat(installedChunks[chunkIds[i]][0]);"
149+
]),
150+
"installedChunks[chunkIds[i]] = 0;"
151+
]),
152+
"}",
153+
"for(i = 0; i < callbacks.length; i++)",
154+
Template.indent("callbacks[i]();")
155+
])
156+
),
157+
"});"
158+
]),
159+
"});",
160+
"promises.push(installedChunkData[2] = promise);"
161+
]),
162+
"}"
163+
]),
164+
"}"
165+
]);
166+
} else {
167+
const request = mainTemplate.getAssetPath(
168+
JSON.stringify(`./${chunkFilename}`),
169+
{
170+
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
171+
hashWithLength: length =>
172+
`" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
173+
chunk: {
174+
id: '" + chunkId + "',
175+
hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
176+
hashWithLength: length => {
177+
const shortChunkHashMap = {};
178+
for (const chunkId of Object.keys(chunkMaps.hash)) {
179+
if (typeof chunkMaps.hash[chunkId] === "string")
180+
shortChunkHashMap[chunkId] = chunkMaps.hash[
181+
chunkId
182+
].substr(0, length);
183+
}
184+
return `" + ${JSON.stringify(
185+
shortChunkHashMap
186+
)}[chunkId] + "`;
187+
},
188+
name: `" + (${JSON.stringify(
189+
chunkMaps.name
190+
)}[chunkId]||chunkId) + "`
191+
}
192+
}
193+
);
194+
return Template.asString([
195+
source,
196+
"",
197+
"// require() chunk loading for javascript",
198+
"",
199+
'// "0" is the signal for "already loaded"',
200+
"if(installedChunks[chunkId] !== 0) {",
201+
Template.indent(
202+
[`var chunk = require(${request});`]
203+
.concat(insertMoreModules)
204+
.concat([
205+
"for(var i = 0; i < chunkIds.length; i++)",
206+
Template.indent("installedChunks[chunkIds[i]] = 0;")
207+
])
208+
),
209+
"}"
210+
]);
211+
}
212+
}
213+
);
214+
mainTemplate.hooks.hotBootstrap.tap(
215+
"NodeMainTemplatePlugin",
216+
(source, chunk, hash) => {
217+
const hotUpdateChunkFilename =
218+
mainTemplate.outputOptions.hotUpdateChunkFilename;
219+
const hotUpdateMainFilename =
220+
mainTemplate.outputOptions.hotUpdateMainFilename;
221+
const chunkMaps = chunk.getChunkMaps();
222+
const currentHotUpdateChunkFilename = mainTemplate.getAssetPath(
223+
JSON.stringify(hotUpdateChunkFilename),
224+
{
225+
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
226+
hashWithLength: length =>
227+
`" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`,
228+
chunk: {
229+
id: '" + chunkId + "',
230+
hash: `" + ${JSON.stringify(chunkMaps.hash)}[chunkId] + "`,
231+
hashWithLength: length => {
232+
const shortChunkHashMap = {};
233+
for (const chunkId of Object.keys(chunkMaps.hash)) {
234+
if (typeof chunkMaps.hash[chunkId] === "string")
235+
shortChunkHashMap[chunkId] = chunkMaps.hash[chunkId].substr(
236+
0,
237+
length
238+
);
239+
}
240+
return `" + ${JSON.stringify(shortChunkHashMap)}[chunkId] + "`;
241+
},
242+
name: `" + (${JSON.stringify(
243+
chunkMaps.name
244+
)}[chunkId]||chunkId) + "`
245+
}
246+
}
247+
);
248+
const currentHotUpdateMainFilename = mainTemplate.getAssetPath(
249+
JSON.stringify(hotUpdateMainFilename),
250+
{
251+
hash: `" + ${mainTemplate.renderCurrentHashCode(hash)} + "`,
252+
hashWithLength: length =>
253+
`" + ${mainTemplate.renderCurrentHashCode(hash, length)} + "`
254+
}
255+
);
256+
return Template.getFunctionContent(
257+
asyncChunkLoading
258+
? require("./NodeMainTemplateAsync.runtime.js")
259+
: require("./NodeMainTemplate.runtime.js")
260+
)
261+
.replace(/\$require\$/g, mainTemplate.requireFn)
262+
.replace(/\$hotMainFilename\$/g, currentHotUpdateMainFilename)
263+
.replace(/\$hotChunkFilename\$/g, currentHotUpdateChunkFilename);
264+
}
265+
);
266+
mainTemplate.hooks.hash.tap("NodeMainTemplatePlugin", hash => {
267+
hash.update("node");
268+
hash.update("3");
269+
hash.update(mainTemplate.outputOptions.filename + "");
270+
hash.update(mainTemplate.outputOptions.chunkFilename + "");
271+
});
272+
}
273+
};

0 commit comments

Comments
 (0)