From 20e31b0e2a251afa05a5fa5f76ba9e3b1c2afbc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andreas=20Cederstr=C3=B6m?= Date: Wed, 24 Jan 2018 14:09:49 +0100 Subject: [PATCH] - [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 #3086 #2415 prior discussion #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` --- package.json | 17 +-- .../package.json | 2 +- packages/babel-preset-react-app/package.json | 30 ++--- .../confusing-browser-globals/package.json | 2 +- .../react-dev-utils/InterpolateHtmlPlugin.js | 9 +- packages/react-dev-utils/ModuleScopePlugin.js | 113 +++++++++--------- packages/react-dev-utils/README.md | 14 +-- .../WatchMissingNodeModulesPlugin.js | 10 +- .../react-dev-utils/WebpackDevServerUtils.js | 4 +- packages/react-dev-utils/package.json | 18 +-- packages/react-error-overlay/package.json | 39 +++--- .../webpack.config.iframe.js | 32 +++-- .../react-error-overlay/webpack.config.js | 11 ++ .../config/webpack.config.dev.js | 22 +++- .../config/webpack.config.prod.js | 88 ++++++++------ .../config/webpackDevServer.config.js | 2 +- packages/react-scripts/package.json | 65 +++++----- 17 files changed, 264 insertions(+), 214 deletions(-) diff --git a/package.json b/package.json index 9a590471c3c..bd9e5ff3331 100644 --- a/package.json +++ b/package.json @@ -16,19 +16,20 @@ "screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor", "test": "cd packages/react-scripts && node bin/react-scripts.js test --env=jsdom", "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'", - "precommit": "lint-staged" + "precommit": "lint-staged", + "webpack-defaults": "webpack-defaults" }, "devDependencies": { - "eslint": "4.15.0", + "eslint": "4.18.2", "execa": "^0.9.0", - "husky": "^0.13.2", - "lerna": "2.6.0", - "lerna-changelog": "^0.6.0", - "lint-staged": "^3.3.1", + "husky": "^0.14.3", + "lerna": "2.9.0", + "lerna-changelog": "^0.7.0", + "lint-staged": "^7.0.0", "meow": "^4.0.0", "multimatch": "^2.1.0", - "prettier": "1.6.1", - "svg-term-cli": "^2.0.3", + "prettier": "1.11.1", + "svg-term-cli": "^2.1.1", "tempy": "^0.2.1" }, "lint-staged": { diff --git a/packages/babel-plugin-named-asset-import/package.json b/packages/babel-plugin-named-asset-import/package.json index 9c586ac5753..035e515d10e 100644 --- a/packages/babel-plugin-named-asset-import/package.json +++ b/packages/babel-plugin-named-asset-import/package.json @@ -12,6 +12,6 @@ "index.js" ], "peerDependencies": { - "@babel/core": "7.0.0-beta.38" + "@babel/core": "7.0.0-beta.40" } } diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 5e3f3b0a5ff..e21dc452fd1 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -12,21 +12,21 @@ "dependencies.js" ], "dependencies": { - "@babel/core": "7.0.0-beta.38", - "@babel/plugin-proposal-class-properties": "7.0.0-beta.38", - "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.38", - "@babel/plugin-transform-classes": "7.0.0-beta.38", - "@babel/plugin-transform-destructuring": "7.0.0-beta.38", - "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.38", - "@babel/plugin-transform-react-display-name": "7.0.0-beta.38", - "@babel/plugin-transform-react-jsx": "7.0.0-beta.38", - "@babel/plugin-transform-regenerator": "7.0.0-beta.38", - "@babel/plugin-transform-runtime": "7.0.0-beta.38", - "@babel/preset-env": "7.0.0-beta.38", - "@babel/preset-flow": "7.0.0-beta.38", - "@babel/preset-react": "7.0.0-beta.38", - "babel-plugin-macros": "2.0.0", + "@babel/core": "7.0.0-beta.40", + "@babel/plugin-proposal-class-properties": "7.0.0-beta.40", + "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.40", + "@babel/plugin-transform-classes": "7.0.0-beta.40", + "@babel/plugin-transform-destructuring": "7.0.0-beta.40", + "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.40", + "@babel/plugin-transform-react-display-name": "7.0.0-beta.40", + "@babel/plugin-transform-react-jsx": "7.0.0-beta.40", + "@babel/plugin-transform-regenerator": "7.0.0-beta.40", + "@babel/plugin-transform-runtime": "7.0.0-beta.40", + "@babel/preset-env": "7.0.0-beta.40", + "@babel/preset-flow": "7.0.0-beta.40", + "@babel/preset-react": "7.0.0-beta.40", + "babel-plugin-macros": "2.1.0", "babel-plugin-transform-dynamic-import": "2.0.0", - "babel-plugin-transform-react-remove-prop-types": "0.4.12" + "babel-plugin-transform-react-remove-prop-types": "0.4.13" } } diff --git a/packages/confusing-browser-globals/package.json b/packages/confusing-browser-globals/package.json index b96cff9ef93..2243bfb8e70 100644 --- a/packages/confusing-browser-globals/package.json +++ b/packages/confusing-browser-globals/package.json @@ -16,6 +16,6 @@ "index.js" ], "devDependencies": { - "jest": "22.1.2" + "jest": "22.4.2" } } diff --git a/packages/react-dev-utils/InterpolateHtmlPlugin.js b/packages/react-dev-utils/InterpolateHtmlPlugin.js index 9233bdefa3c..5100349f335 100644 --- a/packages/react-dev-utils/InterpolateHtmlPlugin.js +++ b/packages/react-dev-utils/InterpolateHtmlPlugin.js @@ -22,10 +22,10 @@ class InterpolateHtmlPlugin { } apply(compiler) { - compiler.plugin('compilation', compilation => { - compilation.plugin( - 'html-webpack-plugin-before-html-processing', - (data, callback) => { + compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => { + compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap( + 'InterpolateHtmlPlugin', + data => { // Run HTML through a series of user-specified string replacements. Object.keys(this.replacements).forEach(key => { const value = this.replacements[key]; @@ -34,7 +34,6 @@ class InterpolateHtmlPlugin { value ); }); - callback(null, data); } ); }); diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js index 101a30a1fb9..e8036b9d6c4 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -18,63 +18,66 @@ class ModuleScopePlugin { apply(resolver) { const { appSrc } = this; - resolver.plugin('file', (request, callback) => { - // Unknown issuer, probably webpack internals - if (!request.context.issuer) { - return callback(); - } - if ( - // If this resolves to a node_module, we don't care what happens next - request.descriptionFileRoot.indexOf('/node_modules/') !== -1 || - request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 || - // Make sure this request was manual - !request.__innerRequest_request - ) { - return callback(); - } - // Resolve the issuer from our appSrc and make sure it's one of our files - // Maybe an indexOf === 0 would be better? - const relative = path.relative(appSrc, request.context.issuer); - // If it's not in src/ or a subdirectory, not our request! - if (relative.startsWith('../') || relative.startsWith('..\\')) { - return callback(); - } - const requestFullPath = path.resolve( - path.dirname(request.context.issuer), - request.__innerRequest_request - ); - if (this.allowedFiles.has(requestFullPath)) { - return callback(); - } - // Find path from src to the requested file - // Error if in a parent directory of src/ - const requestRelative = path.relative(appSrc, requestFullPath); - if ( - requestRelative.startsWith('../') || - requestRelative.startsWith('..\\') - ) { - callback( - new Error( - `You attempted to import ${chalk.cyan( - request.__innerRequest_request - )} which falls outside of the project ${chalk.cyan( - 'src/' - )} directory. ` + - `Relative imports outside of ${chalk.cyan( - 'src/' - )} are not supported. ` + - `You can either move it inside ${chalk.cyan( - 'src/' - )}, or add a symlink to it from project's ${chalk.cyan( - 'node_modules/' - )}.` - ), - request + resolver.hooks.file.tapAsync( + 'ModuleScopePlugin', + (request, contextResolver, callback) => { + // Unknown issuer, probably webpack internals + if (!request.context.issuer) { + return callback(); + } + if ( + // If this resolves to a node_module, we don't care what happens next + request.descriptionFileRoot.indexOf('/node_modules/') !== -1 || + request.descriptionFileRoot.indexOf('\\node_modules\\') !== -1 || + // Make sure this request was manual + !request.__innerRequest_request + ) { + return callback(); + } + // Resolve the issuer from our appSrc and make sure it's one of our files + // Maybe an indexOf === 0 would be better? + const relative = path.relative(appSrc, request.context.issuer); + // If it's not in src/ or a subdirectory, not our request! + if (relative.startsWith('../') || relative.startsWith('..\\')) { + return callback(); + } + const requestFullPath = path.resolve( + path.dirname(request.context.issuer), + request.__innerRequest_request ); - } else { - callback(); + if (this.allowedFiles.has(requestFullPath)) { + return callback(); + } + // Find path from src to the requested file + // Error if in a parent directory of src/ + const requestRelative = path.relative(appSrc, requestFullPath); + if ( + requestRelative.startsWith('../') || + requestRelative.startsWith('..\\') + ) { + callback( + new Error( + `You attempted to import ${chalk.cyan( + request.__innerRequest_request + )} which falls outside of the project ${chalk.cyan( + 'src/' + )} directory. ` + + `Relative imports outside of ${chalk.cyan( + 'src/' + )} are not supported. ` + + `You can either move it inside ${chalk.cyan( + 'src/' + )}, or add a symlink to it from project's ${chalk.cyan( + 'node_modules/' + )}.` + ), + request + ); + } else { + callback(); + } } - }); + ); } } diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 5279ade8f41..5ca70513726 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -38,6 +38,11 @@ module.exports = { }, // ... plugins: [ + // Generates an `index.html` file with the