From 4f751adac5ce7ec9adfdb383047493de8748e5c5 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.8.X - [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 --- package.json | 14 +- packages/babel-preset-react-app/package.json | 2 +- .../confusing-browser-globals/package.json | 2 +- .../react-dev-utils/InterpolateHtmlPlugin.js | 9 +- packages/react-dev-utils/ModuleScopePlugin.js | 128 +++++------ 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 | 27 +-- .../webpack.config.iframe.js | 32 +-- .../react-error-overlay/webpack.config.js | 11 + .../config/webpack.config.dev.js | 65 +++--- .../config/webpack.config.prod.js | 200 ++++++++---------- .../config/webpackDevServer.config.js | 2 +- packages/react-scripts/package.json | 63 +++--- 16 files changed, 302 insertions(+), 299 deletions(-) diff --git a/package.json b/package.json index 1084992025b..e8309674b8b 100644 --- a/package.json +++ b/package.json @@ -19,16 +19,16 @@ "precommit": "lint-staged" }, "devDependencies": { - "eslint": "4.15.0", - "execa": "^0.9.0", - "husky": "^0.13.2", - "lerna": "2.6.0", - "lerna-changelog": "^0.6.0", + "eslint": "4.19.1", + "execa": "^0.10.0", + "husky": "^0.14.3", + "lerna": "2.9.1", + "lerna-changelog": "^0.7.0", "lint-staged": "^7.0.5", "meow": "^4.0.0", "multimatch": "^2.1.0", - "prettier": "1.6.1", - "svg-term-cli": "^2.0.3", + "prettier": "1.12.1", + "svg-term-cli": "^2.1.1", "tempy": "^0.2.1" }, "lint-staged": { diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 9df5dcb7326..32054a98747 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -27,6 +27,6 @@ "@babel/preset-react": "7.0.0-beta.46", "babel-plugin-macros": "2.2.1", "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 874bec0a52b..88767c4d0f7 100644 --- a/packages/confusing-browser-globals/package.json +++ b/packages/confusing-browser-globals/package.json @@ -16,6 +16,6 @@ "index.js" ], "devDependencies": { - "jest": "22.4.1" + "jest": "22.4.3" } } 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 695426331b9..a16954c91ed 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -18,70 +18,72 @@ class ModuleScopePlugin { apply(resolver) { const { appSrcs } = 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? - if ( - appSrcs.every(appSrc => { - const relative = path.relative(appSrc, request.context.issuer); - // If it's not in one of our app src or a subdirectory, not our request! - return 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 all given appSrcs - if ( - appSrcs.every(appSrc => { - const requestRelative = path.relative(appSrc, requestFullPath); - return ( - 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? + if ( + appSrcs.every(appSrc => { + const relative = path.relative(appSrc, request.context.issuer); + // If it's not in one of our app src or a subdirectory, not our request! + return 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 all given appSrcs + if ( + appSrcs.every(appSrc => { + const requestRelative = path.relative(appSrc, requestFullPath); + return ( + 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 f63febe7c65..9d53e05db05 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