From bb3748c9a1ddf0ed5440b9257877085ef5dcb0b9 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 19 Sep 2018 11:36:26 -0400 Subject: [PATCH 1/2] Upgrade html webpack plugin --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 0e639a768dd..9e0a4d8c739 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -47,7 +47,7 @@ "fs-extra": "5.0.0", "graphql": "0.13.2", "graphql-tag": "2.9.2", - "html-webpack-plugin": "3.2.0", + "html-webpack-plugin": "4.0.0-alpha.2", "identity-obj-proxy": "3.0.0", "jest": "23.5.0", "loader-utils": "1.1.0", From 5d549bf3134581aaee5e6729245e03d69f189037 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 19 Sep 2018 11:55:09 -0400 Subject: [PATCH 2/2] Fix build --- .../react-dev-utils/InterpolateHtmlPlugin.js | 14 ++-- packages/react-dev-utils/README.md | 68 +++++++++---------- .../config/webpack.config.dev.js | 2 +- .../config/webpack.config.prod.js | 2 +- 4 files changed, 42 insertions(+), 44 deletions(-) diff --git a/packages/react-dev-utils/InterpolateHtmlPlugin.js b/packages/react-dev-utils/InterpolateHtmlPlugin.js index 5100349f335..30438f0b8e0 100644 --- a/packages/react-dev-utils/InterpolateHtmlPlugin.js +++ b/packages/react-dev-utils/InterpolateHtmlPlugin.js @@ -6,7 +6,7 @@ */ // This Webpack plugin lets us interpolate custom variables into `index.html`. -// Usage: `new InterpolateHtmlPlugin({ 'MY_VARIABLE': 42 })` +// Usage: `new InterpolateHtmlPlugin(HtmlWebpackPlugin, { 'MY_VARIABLE': 42 })` // Then, you can use %MY_VARIABLE% in your `index.html`. // It works in tandem with HtmlWebpackPlugin. @@ -17,15 +17,16 @@ const escapeStringRegexp = require('escape-string-regexp'); class InterpolateHtmlPlugin { - constructor(replacements) { + constructor(htmlWebpackPlugin, replacements) { + this.htmlWebpackPlugin = htmlWebpackPlugin; this.replacements = replacements; } apply(compiler) { compiler.hooks.compilation.tap('InterpolateHtmlPlugin', compilation => { - compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap( - 'InterpolateHtmlPlugin', - data => { + this.htmlWebpackPlugin + .getHooks(compilation) + .beforeEmit.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,8 +35,7 @@ class InterpolateHtmlPlugin { value ); }); - } - ); + }); }); } } diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md index 9d53e05db05..a93166d759e 100644 --- a/packages/react-dev-utils/README.md +++ b/packages/react-dev-utils/README.md @@ -34,7 +34,7 @@ var publicUrl = '/my-custom-url'; module.exports = { output: { // ... - publicPath: publicUrl + '/' + publicPath: publicUrl + '/', }, // ... plugins: [ @@ -45,18 +45,17 @@ module.exports = { }), // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: // - new InterpolateHtmlPlugin({ - PUBLIC_URL: publicUrl + new InterpolateHtmlPlugin(HtmlWebpackPlugin, { + PUBLIC_URL: publicUrl, // You can pass any key-value pairs, this was just an example. // WHATEVER: 42 will replace %WHATEVER% with 42 in index.html. }), // ... ], // ... -} +}; ``` - #### `new ModuleScopePlugin(appSrc: string | string[], allowedFiles?: string[])` This Webpack plugin ensures that relative imports from app's source directories don't reach outside of it. @@ -65,7 +64,6 @@ This Webpack plugin ensures that relative imports from app's source directories var path = require('path'); var ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); - module.exports = { // ... resolve: { @@ -77,7 +75,7 @@ module.exports = { // ... }, // ... -} +}; ``` #### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)` @@ -99,10 +97,10 @@ module.exports = { // to restart the development server for Webpack to discover it. This plugin // makes the discovery automatic so you don't have to restart. // See https://github.com/facebook/create-react-app/issues/186 - new WatchMissingNodeModulesPlugin(path.resolve('node_modules')) + new WatchMissingNodeModulesPlugin(path.resolve('node_modules')), ], // ... -} +}; ``` #### `checkRequiredFiles(files: Array): boolean` @@ -115,10 +113,12 @@ If a file is not found, prints a warning message and returns `false`. var path = require('path'); var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); -if (!checkRequiredFiles([ - path.resolve('public/index.html'), - path.resolve('src/index.js') -])) { +if ( + !checkRequiredFiles([ + path.resolve('public/index.html'), + path.resolve('src/index.js'), + ]) +) { process.exit(1); } ``` @@ -145,22 +145,22 @@ const eslintFormatter = require('react-dev-utils/eslintFormatter'); // In your webpack config: // ... module: { - rules: [ - { - test: /\.(js|jsx)$/, - include: paths.appSrc, - enforce: 'pre', - use: [ - { - loader: 'eslint-loader', - options: { - // Pass the formatter: - formatter: eslintFormatter, - }, + rules: [ + { + test: /\.(js|jsx)$/, + include: paths.appSrc, + enforce: 'pre', + use: [ + { + loader: 'eslint-loader', + options: { + // Pass the formatter: + formatter: eslintFormatter, }, - ], - } - ] + }, + ], + }, + ]; } ``` @@ -264,7 +264,6 @@ Attempts to open the browser with a given URL.
On Mac OS X, attempts to reuse an existing Chrome tab via AppleScript.
Otherwise, falls back to [opn](https://github.com/sindresorhus/opn) behavior. - ```js var path = require('path'); var openBrowser = require('react-dev-utils/openBrowser'); @@ -321,10 +320,10 @@ module.exports = { // require.resolve('webpack-dev-server/client') + '?/', // require.resolve('webpack/hot/dev-server'), 'react-dev-utils/webpackHotDevClient', - 'src/index' + 'src/index', ], // ... -} +}; ``` #### `getCSSModuleLocalIdent(context: Object, localIdentName: String, localName: String, options: Object): string` @@ -340,7 +339,7 @@ const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent') // In your webpack config: // ... module: { - rules: [ + rules: [ { test: /\.module\.css$/, use: [ @@ -358,8 +357,7 @@ module: { options: postCSSLoaderOptions, }, ], - } - ] + }, + ]; } ``` - diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index d46a9c6698a..1fe0f70e264 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -363,7 +363,7 @@ module.exports = { // The public URL is available as %PUBLIC_URL% in index.html, e.g.: // // In development, this will be an empty string. - new InterpolateHtmlPlugin(env.raw), + new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw), // Makes some environment variables available to the JS code, for example: // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. new webpack.DefinePlugin(env.stringified), diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 94d72d6d1ed..f36e1de3bce 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -409,7 +409,7 @@ module.exports = { // // In production, it will be an empty string unless you specify "homepage" // in `package.json`, in which case it will be the pathname of that URL. - new InterpolateHtmlPlugin(env.raw), + new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw), // Makes some environment variables available to the JS code, for example: // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`. // It is absolutely essential that NODE_ENV was set to production here.