Skip to content

Commit d72678f

Browse files
andriijasgaearon
andriijas
authored and
gaearon
committed
- [x] Upgrade to webpack 4.8.X (#4077)
- [x] Utilize webpack 4 development and production modes - [x] Upgrade webpack dev server - [x] Webpack 4 compatible release of thread-loader - [x] Webpack 4 compatible release of HtmlWebpackPlugin - [x] Webpack 4 compatible release of SwPrecacheWebpackPlugin - [x] Webpack 4 compatible release of WebpackManifestPlugin - [x] Update README - [x] Update WebpackDevServerUtils - [x] Update InterpolateHtmlPlugin - [x] Update ModuleScopePlugin - [x] Update WatchMissingNodeModulesPlugin - [x] Move UglifyJS options to webpack 4 optimize - [x] Move InterpolateHtmlPlugin to make it tapable on HtmlWebpackPlugin - [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` - [x] Implicit webpack.NamedModulesPlugin in dev config as its default in webpack 4 - [x] Disable webpack performance hints as we have our own filesize reporter - [x] Replace ExtractTextPlugin with MiniCssExtractPlugin - [x] Switch to css whole file minification via OptimizeCSSAssetsPlugin rather than per module css minification to gain performance
1 parent 493a379 commit d72678f

17 files changed

+304
-301
lines changed

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@
1919
"precommit": "lint-staged"
2020
},
2121
"devDependencies": {
22-
"eslint": "4.15.0",
23-
"execa": "^0.9.0",
24-
"husky": "^0.13.2",
25-
"lerna": "2.6.0",
26-
"lerna-changelog": "^0.6.0",
22+
"eslint": "4.19.1",
23+
"execa": "^0.10.0",
24+
"husky": "^0.14.3",
25+
"lerna": "2.9.1",
26+
"lerna-changelog": "^0.7.0",
2727
"lint-staged": "^7.0.5",
2828
"meow": "^4.0.0",
2929
"multimatch": "^2.1.0",
30-
"prettier": "1.6.1",
31-
"svg-term-cli": "^2.0.3",
30+
"prettier": "1.12.1",
31+
"svg-term-cli": "^2.1.1",
3232
"tempy": "^0.2.1"
3333
},
3434
"lint-staged": {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@
2727
"@babel/preset-react": "7.0.0-beta.46",
2828
"babel-plugin-macros": "2.2.1",
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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
"index.js"
1717
],
1818
"devDependencies": {
19-
"jest": "22.4.1"
19+
"jest": "22.4.3"
2020
}
2121
}

‎packages/eslint-config-react-app/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"eslint-plugin-flowtype": "^2.34.1",
1717
"eslint-plugin-import": "^2.6.0",
1818
"eslint-plugin-jsx-a11y": "^6.0.2",
19-
"eslint-plugin-react": "^7.7.0"
19+
"eslint-plugin-react": "^7.8.2"
2020
},
2121
"dependencies": {
2222
"confusing-browser-globals": "^1.0.0"

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

Lines changed: 4 additions & 5 deletions
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

Lines changed: 65 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -18,70 +18,72 @@ class ModuleScopePlugin {
1818

1919
apply(resolver) {
2020
const { appSrcs } = 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-
if (
38-
appSrcs.every(appSrc => {
39-
const relative = path.relative(appSrc, request.context.issuer);
40-
// If it's not in one of our app src or a subdirectory, not our request!
41-
return relative.startsWith('../') || relative.startsWith('..\\');
42-
})
43-
) {
44-
return callback();
45-
}
46-
const requestFullPath = path.resolve(
47-
path.dirname(request.context.issuer),
48-
request.__innerRequest_request
49-
);
50-
if (this.allowedFiles.has(requestFullPath)) {
51-
return callback();
52-
}
53-
// Find path from src to the requested file
54-
// Error if in a parent directory of all given appSrcs
55-
if (
56-
appSrcs.every(appSrc => {
57-
const requestRelative = path.relative(appSrc, requestFullPath);
58-
return (
59-
requestRelative.startsWith('../') ||
60-
requestRelative.startsWith('..\\')
61-
);
62-
})
63-
) {
64-
callback(
65-
new Error(
66-
`You attempted to import ${chalk.cyan(
67-
request.__innerRequest_request
68-
)} which falls outside of the project ${chalk.cyan(
69-
'src/'
70-
)} directory. ` +
71-
`Relative imports outside of ${chalk.cyan(
72-
'src/'
73-
)} are not supported. ` +
74-
`You can either move it inside ${chalk.cyan(
75-
'src/'
76-
)}, or add a symlink to it from project's ${chalk.cyan(
77-
'node_modules/'
78-
)}.`
79-
),
80-
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+
if (
40+
appSrcs.every(appSrc => {
41+
const relative = path.relative(appSrc, request.context.issuer);
42+
// If it's not in one of our app src or a subdirectory, not our request!
43+
return relative.startsWith('../') || relative.startsWith('..\\');
44+
})
45+
) {
46+
return callback();
47+
}
48+
const requestFullPath = path.resolve(
49+
path.dirname(request.context.issuer),
50+
request.__innerRequest_request
8151
);
82-
} else {
83-
callback();
84-
}
52+
if (this.allowedFiles.has(requestFullPath)) {
53+
return callback();
54+
}
55+
// Find path from src to the requested file
56+
// Error if in a parent directory of all given appSrcs
57+
if (
58+
appSrcs.every(appSrc => {
59+
const requestRelative = path.relative(appSrc, requestFullPath);
60+
return (
61+
requestRelative.startsWith('../') ||
62+
requestRelative.startsWith('..\\')
63+
);
64+
})
65+
) {
66+
callback(
67+
new Error(
68+
`You attempted to import ${chalk.cyan(
69+
request.__innerRequest_request
70+
)} which falls outside of the project ${chalk.cyan(
71+
'src/'
72+
)} directory. ` +
73+
`Relative imports outside of ${chalk.cyan(
74+
'src/'
75+
)} are not supported. ` +
76+
`You can either move it inside ${chalk.cyan(
77+
'src/'
78+
)}, or add a symlink to it from project's ${chalk.cyan(
79+
'node_modules/'
80+
)}.`
81+
),
82+
request
83+
);
84+
} else {
85+
callback();
86+
}
8587
});
8688
}
8789
}

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

Lines changed: 7 additions & 7 deletions
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

Lines changed: 4 additions & 6 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,29 +40,29 @@
4040
"dependencies": {
4141
"@babel/code-frame": "7.0.0-beta.46",
4242
"address": "1.0.3",
43-
"browserslist": "2.11.3",
44-
"chalk": "2.3.0",
45-
"cross-spawn": "5.1.0",
43+
"browserslist": "3.2.6",
44+
"chalk": "2.4.1",
45+
"cross-spawn": "6.0.5",
4646
"detect-port-alt": "1.1.6",
4747
"escape-string-regexp": "1.0.5",
48-
"filesize": "3.5.11",
48+
"filesize": "3.6.1",
4949
"find-pkg": "1.0.0",
5050
"global-modules": "1.0.0",
51-
"globby": "7.1.1",
51+
"globby": "8.0.1",
5252
"gzip-size": "4.1.0",
53-
"inquirer": "5.0.0",
53+
"inquirer": "5.1.0",
5454
"is-root": "1.0.0",
55-
"opn": "5.2.0",
55+
"opn": "5.3.0",
5656
"pkg-up": "2.0.0",
5757
"react-error-overlay": "^4.0.0",
58-
"recursive-readdir": "2.2.1",
58+
"recursive-readdir": "2.2.2",
5959
"shell-quote": "1.6.1",
6060
"sockjs-client": "1.1.4",
6161
"strip-ansi": "4.0.0",
6262
"text-table": "0.2.0"
6363
},
6464
"devDependencies": {
65-
"jest": "22.4.1"
65+
"jest": "22.4.3"
6666
},
6767
"scripts": {
6868
"test": "jest"

‎packages/react-error-overlay/package.json

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,31 +36,32 @@
3636
"anser": "1.4.6",
3737
"babel-core": "^7.0.0-bridge.0",
3838
"babel-eslint": "^8.2.2",
39-
"babel-jest": "^22.4.1",
39+
"babel-jest": "^22.4.3",
4040
"babel-loader": "^8.0.0-beta.0",
4141
"babel-preset-react-app": "^3.1.1",
42-
"chalk": "^2.1.0",
43-
"chokidar": "^2.0.0",
44-
"cross-env": "5.1.3",
45-
"eslint": "4.15.0",
42+
"chalk": "^2.3.2",
43+
"chokidar": "^2.0.2",
44+
"cross-env": "5.1.4",
45+
"eslint": "4.19.1",
4646
"eslint-config-react-app": "^2.1.0",
47-
"eslint-plugin-flowtype": "2.41.0",
48-
"eslint-plugin-import": "2.8.0",
47+
"eslint-plugin-flowtype": "2.46.1",
48+
"eslint-plugin-import": "2.9.0",
4949
"eslint-plugin-jsx-a11y": "6.0.3",
50-
"eslint-plugin-react": "7.7.0",
50+
"eslint-plugin-react": "7.8.2",
5151
"flow-bin": "^0.63.1",
5252
"html-entities": "1.2.1",
53-
"jest": "22.4.1",
54-
"jest-fetch-mock": "1.2.1",
53+
"jest": "22.4.3",
54+
"jest-fetch-mock": "1.5.0",
5555
"object-assign": "4.1.1",
5656
"promise": "8.0.1",
5757
"raw-loader": "^0.5.1",
58-
"react": "^16.0.0",
59-
"react-dom": "^16.0.0",
60-
"rimraf": "^2.6.1",
58+
"react": "^16.3.2",
59+
"react-dom": "^16.3.2",
60+
"rimraf": "^2.6.2",
6161
"settle-promise": "1.0.0",
6262
"source-map": "0.5.6",
63-
"webpack": "^3.6.0"
63+
"uglifyjs-webpack-plugin": "1.2.5",
64+
"webpack": "^4.8.1"
6465
},
6566
"jest": {
6667
"setupFiles": [

0 commit comments

Comments
 (0)