Skip to content

Commit 20e31b0

Browse files
andriijasandriijas
committed
- [x] Upgrade to webpack 4.1.0
- [x] Use new webpack 4 development and production modes - [x] Upgrade webpack dev server - [x] webpack 4 compatible release of thread-loader - [x] Upgrade to webpack 4 compatible release of HtmlWebpackPlugin - [x] Beta release of ExtractTextPlugin compatible plugin - [x] Pre-release of SwPrecacheWebpackPlugin compatible plugin - [x] Pre-release of WebpackManifestPLugin compatible plugin - [x] allChunks on ExtractTextPlugin fixes facebook#3086 facebook#2415 prior discussion facebook#408 more details of this behavior webpack/webpack#673 - [x] Update README - [x] Update WebpackDevServerUtils - [x] Update InterpolateHtmlPlugin - [x] Update ModuleScopePlugin - [x] Update WatchMissingNodeModulesPlugin - [x] Move UglifyJS options to webpack 4 optimize - [x] vendor splitting via splitChunks.splitChunks (https://twitter.com/wSokra/status/969633336732905474) - [x] long term caching via splitChunks.runtimeChunk (https://twitter.com/wSokra/status/969679223278505985) - [x] Make sure process.env.NODE_ENV is proxied correctly to `react-error-overlay`
1 parent 65e0621 commit 20e31b0

17 files changed

+264
-214
lines changed

‎package.json

+9-8
Original file line numberDiff line numberDiff line change
@@ -16,19 +16,20 @@
1616
"screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
1717
"test": "cd packages/react-scripts && node bin/react-scripts.js test --env=jsdom",
1818
"format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
19-
"precommit": "lint-staged"
19+
"precommit": "lint-staged",
20+
"webpack-defaults": "webpack-defaults"
2021
},
2122
"devDependencies": {
22-
"eslint": "4.15.0",
23+
"eslint": "4.18.2",
2324
"execa": "^0.9.0",
24-
"husky": "^0.13.2",
25-
"lerna": "2.6.0",
26-
"lerna-changelog": "^0.6.0",
27-
"lint-staged": "^3.3.1",
25+
"husky": "^0.14.3",
26+
"lerna": "2.9.0",
27+
"lerna-changelog": "^0.7.0",
28+
"lint-staged": "^7.0.0",
2829
"meow": "^4.0.0",
2930
"multimatch": "^2.1.0",
30-
"prettier": "1.6.1",
31-
"svg-term-cli": "^2.0.3",
31+
"prettier": "1.11.1",
32+
"svg-term-cli": "^2.1.1",
3233
"tempy": "^0.2.1"
3334
},
3435
"lint-staged": {

‎packages/babel-plugin-named-asset-import/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
"index.js"
1313
],
1414
"peerDependencies": {
15-
"@babel/core": "7.0.0-beta.38"
15+
"@babel/core": "7.0.0-beta.40"
1616
}
1717
}

‎packages/babel-preset-react-app/package.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,21 @@
1212
"dependencies.js"
1313
],
1414
"dependencies": {
15-
"@babel/core": "7.0.0-beta.38",
16-
"@babel/plugin-proposal-class-properties": "7.0.0-beta.38",
17-
"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.38",
18-
"@babel/plugin-transform-classes": "7.0.0-beta.38",
19-
"@babel/plugin-transform-destructuring": "7.0.0-beta.38",
20-
"@babel/plugin-transform-react-constant-elements": "7.0.0-beta.38",
21-
"@babel/plugin-transform-react-display-name": "7.0.0-beta.38",
22-
"@babel/plugin-transform-react-jsx": "7.0.0-beta.38",
23-
"@babel/plugin-transform-regenerator": "7.0.0-beta.38",
24-
"@babel/plugin-transform-runtime": "7.0.0-beta.38",
25-
"@babel/preset-env": "7.0.0-beta.38",
26-
"@babel/preset-flow": "7.0.0-beta.38",
27-
"@babel/preset-react": "7.0.0-beta.38",
28-
"babel-plugin-macros": "2.0.0",
15+
"@babel/core": "7.0.0-beta.40",
16+
"@babel/plugin-proposal-class-properties": "7.0.0-beta.40",
17+
"@babel/plugin-syntax-dynamic-import": "7.0.0-beta.40",
18+
"@babel/plugin-transform-classes": "7.0.0-beta.40",
19+
"@babel/plugin-transform-destructuring": "7.0.0-beta.40",
20+
"@babel/plugin-transform-react-constant-elements": "7.0.0-beta.40",
21+
"@babel/plugin-transform-react-display-name": "7.0.0-beta.40",
22+
"@babel/plugin-transform-react-jsx": "7.0.0-beta.40",
23+
"@babel/plugin-transform-regenerator": "7.0.0-beta.40",
24+
"@babel/plugin-transform-runtime": "7.0.0-beta.40",
25+
"@babel/preset-env": "7.0.0-beta.40",
26+
"@babel/preset-flow": "7.0.0-beta.40",
27+
"@babel/preset-react": "7.0.0-beta.40",
28+
"babel-plugin-macros": "2.1.0",
2929
"babel-plugin-transform-dynamic-import": "2.0.0",
30-
"babel-plugin-transform-react-remove-prop-types": "0.4.12"
30+
"babel-plugin-transform-react-remove-prop-types": "0.4.13"
3131
}
3232
}

‎packages/confusing-browser-globals/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"index.js"
1717
],
1818
"devDependencies": {
19-
"jest": "22.1.2"
19+
"jest": "22.4.2"
2020
}
2121
}

‎packages/react-dev-utils/InterpolateHtmlPlugin.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ class InterpolateHtmlPlugin {
2222
}
2323

2424
apply(compiler) {
25-
compiler.plugin('compilation', compilation => {
26-
compilation.plugin(
27-
'html-webpack-plugin-before-html-processing',
28-
(data, callback) => {
25+
compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => {
26+
compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(
27+
'InterpolateHtmlPlugin',
28+
data => {
2929
// Run HTML through a series of user-specified string replacements.
3030
Object.keys(this.replacements).forEach(key => {
3131
const value = this.replacements[key];
@@ -34,7 +34,6 @@ class InterpolateHtmlPlugin {
3434
value
3535
);
3636
});
37-
callback(null, data);
3837
}
3938
);
4039
});

‎packages/react-dev-utils/ModuleScopePlugin.js

+58-55
Original file line numberDiff line numberDiff line change
@@ -18,63 +18,66 @@ class ModuleScopePlugin {
1818

1919
apply(resolver) {
2020
const { appSrc } = this;
21-
resolver.plugin('file', (request, callback) => {
22-
// Unknown issuer, probably webpack internals
23-
if (!request.context.issuer) {
24-
return callback();
25-
}
26-
if (
27-
// If this resolves to a node_module, we don't care what happens next
28-
request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
29-
request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 ||
30-
// Make sure this request was manual
31-
!request.__innerRequest_request
32-
) {
33-
return callback();
34-
}
35-
// Resolve the issuer from our appSrc and make sure it's one of our files
36-
// Maybe an indexOf === 0 would be better?
37-
const relative = path.relative(appSrc, request.context.issuer);
38-
// If it's not in src/ or a subdirectory, not our request!
39-
if (relative.startsWith('../') || relative.startsWith('..\\')) {
40-
return callback();
41-
}
42-
const requestFullPath = path.resolve(
43-
path.dirname(request.context.issuer),
44-
request.__innerRequest_request
45-
);
46-
if (this.allowedFiles.has(requestFullPath)) {
47-
return callback();
48-
}
49-
// Find path from src to the requested file
50-
// Error if in a parent directory of src/
51-
const requestRelative = path.relative(appSrc, requestFullPath);
52-
if (
53-
requestRelative.startsWith('../') ||
54-
requestRelative.startsWith('..\\')
55-
) {
56-
callback(
57-
new Error(
58-
`You attempted to import ${chalk.cyan(
59-
request.__innerRequest_request
60-
)} which falls outside of the project ${chalk.cyan(
61-
'src/'
62-
)} directory. ` +
63-
`Relative imports outside of ${chalk.cyan(
64-
'src/'
65-
)} are not supported. ` +
66-
`You can either move it inside ${chalk.cyan(
67-
'src/'
68-
)}, or add a symlink to it from project's ${chalk.cyan(
69-
'node_modules/'
70-
)}.`
71-
),
72-
request
21+
resolver.hooks.file.tapAsync(
22+
'ModuleScopePlugin',
23+
(request, contextResolver, callback) => {
24+
// Unknown issuer, probably webpack internals
25+
if (!request.context.issuer) {
26+
return callback();
27+
}
28+
if (
29+
// If this resolves to a node_module, we don't care what happens next
30+
request.descriptionFileRoot.indexOf('/node_modules/') !== -1 ||
31+
request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 ||
32+
// Make sure this request was manual
33+
!request.__innerRequest_request
34+
) {
35+
return callback();
36+
}
37+
// Resolve the issuer from our appSrc and make sure it's one of our files
38+
// Maybe an indexOf === 0 would be better?
39+
const relative = path.relative(appSrc, request.context.issuer);
40+
// If it's not in src/ or a subdirectory, not our request!
41+
if (relative.startsWith('../') || relative.startsWith('..\\')) {
42+
return callback();
43+
}
44+
const requestFullPath = path.resolve(
45+
path.dirname(request.context.issuer),
46+
request.__innerRequest_request
7347
);
74-
} else {
75-
callback();
48+
if (this.allowedFiles.has(requestFullPath)) {
49+
return callback();
50+
}
51+
// Find path from src to the requested file
52+
// Error if in a parent directory of src/
53+
const requestRelative = path.relative(appSrc, requestFullPath);
54+
if (
55+
requestRelative.startsWith('../') ||
56+
requestRelative.startsWith('..\\')
57+
) {
58+
callback(
59+
new Error(
60+
`You attempted to import ${chalk.cyan(
61+
request.__innerRequest_request
62+
)} which falls outside of the project ${chalk.cyan(
63+
'src/'
64+
)} directory. ` +
65+
`Relative imports outside of ${chalk.cyan(
66+
'src/'
67+
)} are not supported. ` +
68+
`You can either move it inside ${chalk.cyan(
69+
'src/'
70+
)}, or add a symlink to it from project's ${chalk.cyan(
71+
'node_modules/'
72+
)}.`
73+
),
74+
request
75+
);
76+
} else {
77+
callback();
78+
}
7679
}
77-
});
80+
);
7881
}
7982
}
8083

‎packages/react-dev-utils/README.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,18 @@ module.exports = {
3838
},
3939
// ...
4040
plugins: [
41+
// Generates an `index.html` file with the <script> injected.
42+
new HtmlWebpackPlugin({
43+
inject: true,
44+
template: path.resolve('public/index.html'),
45+
}),
4146
// Makes the public URL available as %PUBLIC_URL% in index.html, e.g.:
4247
// <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
4348
new InterpolateHtmlPlugin({
4449
PUBLIC_URL: publicUrl
4550
// You can pass any key-value pairs, this was just an example.
4651
// WHATEVER: 42 will replace %WHATEVER% with 42 in index.html.
4752
}),
48-
// Generates an `index.html` file with the <script> injected.
49-
new HtmlWebpackPlugin({
50-
inject: true,
51-
template: path.resolve('public/index.html'),
52-
}),
5353
// ...
5454
],
5555
// ...
@@ -198,11 +198,11 @@ var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
198198

199199
var compiler = webpack(config);
200200

201-
compiler.plugin('invalid', function() {
201+
compiler.hooks.invalid.tap('invalid', function() {
202202
console.log('Compiling...');
203203
});
204204

205-
compiler.plugin('done', function(stats) {
205+
compiler.hooks.done.tap('done', function(stats) {
206206
var rawMessages = stats.toJson({}, true);
207207
var messages = formatWebpackMessages(rawMessages);
208208
if (!messages.errors.length && !messages.warnings.length) {

‎packages/react-dev-utils/WatchMissingNodeModulesPlugin.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,15 @@ class WatchMissingNodeModulesPlugin {
1717
}
1818

1919
apply(compiler) {
20-
compiler.plugin('emit', (compilation, callback) => {
21-
var missingDeps = compilation.missingDependencies;
20+
compiler.hooks.emit.tap('WatchMissingNodeModulesPlugin', compilation => {
21+
var missingDeps = Array.from(compilation.missingDependencies);
2222
var nodeModulesPath = this.nodeModulesPath;
2323

2424
// If any missing files are expected to appear in node_modules...
25-
if (missingDeps.some(file => file.indexOf(nodeModulesPath) !== -1)) {
25+
if (missingDeps.some(file => file.includes(nodeModulesPath))) {
2626
// ...tell webpack to watch node_modules recursively until they appear.
27-
compilation.contextDependencies.push(nodeModulesPath);
27+
compilation.contextDependencies.add(nodeModulesPath);
2828
}
29-
30-
callback();
3129
});
3230
}
3331
}

‎packages/react-dev-utils/WebpackDevServerUtils.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
131131
// recompiling a bundle. WebpackDevServer takes care to pause serving the
132132
// bundle, so if you refresh, it'll wait instead of serving the old one.
133133
// "invalid" is short for "bundle invalidated", it doesn't imply any errors.
134-
compiler.plugin('invalid', () => {
134+
compiler.hooks.invalid.tap('invalid', () => {
135135
if (isInteractive) {
136136
clearConsole();
137137
}
@@ -142,7 +142,7 @@ function createCompiler(webpack, config, appName, urls, useYarn) {
142142

143143
// "done" event fires when Webpack has finished recompiling the bundle.
144144
// Whether or not you have warnings or errors, you will get this event.
145-
compiler.plugin('done', stats => {
145+
compiler.hooks.done.tap('done', stats => {
146146
if (isInteractive) {
147147
clearConsole();
148148
}

‎packages/react-dev-utils/package.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -37,31 +37,31 @@
3737
"workspaceUtils.js"
3838
],
3939
"dependencies": {
40-
"@babel/code-frame": "7.0.0-beta.38",
40+
"@babel/code-frame": "7.0.0-beta.40",
4141
"address": "1.0.3",
42-
"browserslist": "2.11.3",
43-
"chalk": "2.3.0",
44-
"cross-spawn": "5.1.0",
42+
"browserslist": "3.1.1",
43+
"chalk": "2.3.1",
44+
"cross-spawn": "6.0.4",
4545
"detect-port-alt": "1.1.5",
4646
"escape-string-regexp": "1.0.5",
47-
"filesize": "3.5.11",
47+
"filesize": "3.6.0",
4848
"find-pkg": "1.0.0",
4949
"global-modules": "1.0.0",
50-
"globby": "7.1.1",
50+
"globby": "8.0.1",
5151
"gzip-size": "4.1.0",
52-
"inquirer": "5.0.0",
52+
"inquirer": "5.1.0",
5353
"is-root": "1.0.0",
5454
"opn": "5.2.0",
5555
"pkg-up": "2.0.0",
5656
"react-error-overlay": "^4.0.0",
57-
"recursive-readdir": "2.2.1",
57+
"recursive-readdir": "2.2.2",
5858
"shell-quote": "1.6.1",
5959
"sockjs-client": "1.1.4",
6060
"strip-ansi": "4.0.0",
6161
"text-table": "0.2.0"
6262
},
6363
"devDependencies": {
64-
"jest": "22.1.2"
64+
"jest": "22.4.2"
6565
},
6666
"scripts": {
6767
"test": "jest"

0 commit comments

Comments
 (0)