From ab4d4b6cbde54540418335cb13106ee27de4bde9 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 18 Dec 2016 15:19:42 -0500 Subject: [PATCH 01/13] Upgrade webpack --- packages/babel-preset-react-app/index.js | 6 +- .../config/webpack.config.dev.js | 78 ++++++++-------- .../config/webpack.config.prod.js | 93 ++++++++++--------- packages/react-scripts/package.json | 4 +- 4 files changed, 99 insertions(+), 82 deletions(-) diff --git a/packages/babel-preset-react-app/index.js b/packages/babel-preset-react-app/index.js index a028babc06c..8a42f885e31 100644 --- a/packages/babel-preset-react-app/index.js +++ b/packages/babel-preset-react-app/index.js @@ -88,7 +88,11 @@ if (env === 'test') { module.exports = { presets: [ // Latest stable ECMAScript features - require.resolve('babel-preset-latest'), + [require.resolve('babel-preset-latest'), { + 'es2015': { + modules: false + } + }], // JSX, Flow require.resolve('babel-preset-react') ], diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 96fd632b795..2790978606c 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -81,12 +81,12 @@ module.exports = { // We use `fallback` instead of `root` because we want `node_modules` to "win" // if there any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 - fallback: paths.nodePaths, + modules: ['node_modules', ...paths.nodePaths], // These are the reasonable defaults supported by the Node ecosystem. // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 - extensions: ['.js', '.json', '.jsx', ''], + extensions: ['.js', '.json', '.jsx'], alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ @@ -97,21 +97,21 @@ module.exports = { // Resolve loaders (webpack plugins for CSS, images, transpilation) from the // directory of `react-scripts` itself rather than the project directory. resolveLoader: { - root: paths.ownNodeModules, - moduleTemplates: ['*-loader'] + modules: [ + paths.ownNodeModules + ] }, // @remove-on-eject-end module: { - // First, run the linter. - // It's important to do this before Babel processes the JS. - preLoaders: [ + rules: [ + // First, run the linter. + // It's important to do this before Babel processes the JS. { test: /\.(js|jsx)$/, - loader: 'eslint', - include: paths.appSrc, - } - ], - loaders: [ + enforce: 'pre', + loader: 'eslint-loader', + include: paths.appSrc + }, // Default loader: load all assets that are not handled // by other loaders with the url loader. // Note: This list needs to be updated with every change of extensions @@ -134,7 +134,7 @@ module.exports = { /\.json$/, /\.svg$/ ], - loader: 'url', + loader: 'url-loader', query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' @@ -144,7 +144,7 @@ module.exports = { { test: /\.(js|jsx)$/, include: paths.appSrc, - loader: 'babel', + loader: 'babel-loader', query: { // @remove-on-eject-begin babelrc: false, @@ -163,44 +163,24 @@ module.exports = { // in development "style" loader enables hot editing of CSS. { test: /\.css$/, - loader: 'style!css?importLoaders=1!postcss' + loader: 'style-loader!css-loader?importLoaders=1!postcss-loader' }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. { test: /\.json$/, - loader: 'json' + loader: 'json-loader' }, // "file" loader for svg { test: /\.svg$/, - loader: 'file', + loader: 'file-loader', query: { name: 'static/media/[name].[hash:8].[ext]' } } ] }, - // @remove-on-eject-begin - // Point ESLint to our predefined config. - eslint: { - configFile: path.join(__dirname, '../.eslintrc'), - useEslintrc: false - }, - // @remove-on-eject-end - // We use PostCSS for autoprefixing only. - postcss: function() { - return [ - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ] - }), - ]; - }, plugins: [ // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: // @@ -213,6 +193,30 @@ module.exports = { inject: true, template: paths.appHtml, }), + new webpack.LoaderOptionsPlugin({ + options: { + // @remove-on-eject-begin + // Point ESLint to our predefined config. + eslint: { + configFile: path.join(__dirname, '../.eslintrc'), + useEslintrc: false + }, + // @remove-on-eject-end + // We use PostCSS for autoprefixing only. + postcss: function() { + return [ + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ] + }), + ]; + } + } + }), // Makes some environment variables available to the JS code, for example: // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. new webpack.DefinePlugin(env), diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 058db0d7921..c0eca6a3aee 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -89,12 +89,12 @@ module.exports = { // We use `fallback` instead of `root` because we want `node_modules` to "win" // if there any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 - fallback: paths.nodePaths, + modules: ['node_modules', ...paths.nodePaths], // These are the reasonable defaults supported by the Node ecosystem. // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 - extensions: ['.js', '.json', '.jsx', ''], + extensions: ['.js', '.json', '.jsx'], alias: { // Support React Native Web // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ @@ -105,21 +105,21 @@ module.exports = { // Resolve loaders (webpack plugins for CSS, images, transpilation) from the // directory of `react-scripts` itself rather than the project directory. resolveLoader: { - root: paths.ownNodeModules, - moduleTemplates: ['*-loader'] + modules: [ + paths.ownNodeModules + ] }, // @remove-on-eject-end module: { - // First, run the linter. - // It's important to do this before Babel processes the JS. - preLoaders: [ + rules: [ + // First, run the linter. + // It's important to do this before Babel processes the JS. { test: /\.(js|jsx)$/, - loader: 'eslint', + enforce: 'pre', + loader: 'eslint-loader', include: paths.appSrc - } - ], - loaders: [ + }, // Default loader: load all assets that are not handled // by other loaders with the url loader. // Note: This list needs to be updated with every change of extensions @@ -140,7 +140,7 @@ module.exports = { /\.json$/, /\.svg$/ ], - loader: 'url', + loader: 'url-loader', query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' @@ -150,7 +150,7 @@ module.exports = { { test: /\.(js|jsx)$/, include: paths.appSrc, - loader: 'babel', + loader: 'babel-loader', // @remove-on-eject-begin query: { babelrc: false, @@ -172,47 +172,28 @@ module.exports = { // in the main CSS file. { test: /\.css$/, - loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss') + loader: ExtractTextPlugin.extract({ + fallbackLoader: 'style-loader', + loader: 'css-loader?importLoaders=1!postcss-loader' + }) // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. { test: /\.json$/, - loader: 'json' + loader: 'json-loader' }, // "file" loader for svg { test: /\.svg$/, - loader: 'file', + loader: 'file-loader', query: { name: 'static/media/[name].[hash:8].[ext]' } } ] }, - // @remove-on-eject-begin - // Point ESLint to our predefined config. - eslint: { - // TODO: consider separate config for production, - // e.g. to enable no-console and no-debugger only in production. - configFile: path.join(__dirname, '../.eslintrc'), - useEslintrc: false - }, - // @remove-on-eject-end - // We use PostCSS for autoprefixing only. - postcss: function() { - return [ - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ] - }), - ]; - }, plugins: [ // Makes the public URL available as %PUBLIC_URL% in index.html, e.g.: // @@ -238,13 +219,38 @@ module.exports = { minifyURLs: true } }), + new webpack.LoaderOptionsPlugin({ + minimize: true, + options: { + // @remove-on-eject-begin + // Point ESLint to our predefined config. + eslint: { + // TODO: consider separate config for production, + // e.g. to enable no-console and no-debugger only in production. + configFile: path.join(__dirname, '../.eslintrc'), + useEslintrc: false + }, + // @remove-on-eject-end + // We use PostCSS for autoprefixing only. + postcss: function() { + return [ + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ] + }), + ]; + } + } + }), // 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. // Otherwise React will be compiled in the very slow development mode. new webpack.DefinePlugin(env), - // This helps ensure the builds are consistent if source hasn't changed: - new webpack.optimize.OccurrenceOrderPlugin(), // Try to dedupe duplicated modules, if any: new webpack.optimize.DedupePlugin(), // Minify the code. @@ -259,10 +265,13 @@ module.exports = { output: { comments: false, screw_ie8: true - } + }, + sourceMap: true }), // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`. - new ExtractTextPlugin('static/css/[name].[contenthash:8].css'), + new ExtractTextPlugin({ + filename: 'static/css/[name].[contenthash:8].css' + }), // Generate a manifest file which contains a mapping of all asset filenames // to their corresponding output file so that tools can pick it up without // having to parse `index.html`. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index c3f7d2bddb4..3f136aad4ee 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -44,7 +44,7 @@ "eslint-plugin-import": "2.0.1", "eslint-plugin-jsx-a11y": "2.2.3", "eslint-plugin-react": "6.4.1", - "extract-text-webpack-plugin": "1.0.1", + "extract-text-webpack-plugin": "2.0.0-beta.4", "file-loader": "0.9.0", "filesize": "3.3.0", "fs-extra": "0.30.0", @@ -61,7 +61,7 @@ "strip-ansi": "3.0.1", "style-loader": "0.13.1", "url-loader": "0.5.7", - "webpack": "1.14.0", + "webpack": ">=2.2.0-rc.0 <3", "webpack-dev-server": "1.16.2", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "1.0.0" From 2fb1ee463d69d49523bcc085b72a4e76ac0421fc Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sun, 18 Dec 2016 15:33:15 -0500 Subject: [PATCH 02/13] Address more webpack v2 ... --- .../config/webpack.config.dev.js | 50 +++++++++++-------- .../config/webpack.config.prod.js | 50 ++++++++++--------- packages/react-scripts/package.json | 3 +- 3 files changed, 57 insertions(+), 46 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 2790978606c..f6fdc2dbd6a 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -78,10 +78,10 @@ module.exports = { resolve: { // This allows you to set a fallback for where Webpack should look for modules. // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. - // We use `fallback` instead of `root` because we want `node_modules` to "win" + // We place these paths second because we want `node_modules` to "win" // if there any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 - modules: ['node_modules', ...paths.nodePaths], + modules: ['node_modules'].concat(paths.nodePaths), // These are the reasonable defaults supported by the Node ecosystem. // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: @@ -109,7 +109,16 @@ module.exports = { { test: /\.(js|jsx)$/, enforce: 'pre', - loader: 'eslint-loader', + use: [{ + // @remove-on-eject-begin + // Point ESLint to our predefined config. + options: { + configFile: path.join(__dirname, '../.eslintrc'), + useEslintrc: false + }, + // @remove-on-eject-end + loader: 'eslint-loader' + }], include: paths.appSrc }, // Default loader: load all assets that are not handled @@ -135,7 +144,7 @@ module.exports = { /\.svg$/ ], loader: 'url-loader', - query: { + options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } @@ -145,7 +154,7 @@ module.exports = { test: /\.(js|jsx)$/, include: paths.appSrc, loader: 'babel-loader', - query: { + options: { // @remove-on-eject-begin babelrc: false, presets: [require.resolve('babel-preset-react-app')], @@ -163,19 +172,21 @@ module.exports = { // in development "style" loader enables hot editing of CSS. { test: /\.css$/, - loader: 'style-loader!css-loader?importLoaders=1!postcss-loader' - }, - // JSON is not enabled by default in Webpack but both Node and Browserify - // allow it implicitly so we also enable it. - { - test: /\.json$/, - loader: 'json-loader' + use: [ + 'style-loader', { + loader: 'css-loader', + options: { + importLoaders: 1 + } + }, + 'postcss-loader' + ] }, // "file" loader for svg { test: /\.svg$/, loader: 'file-loader', - query: { + options: { name: 'static/media/[name].[hash:8].[ext]' } } @@ -195,13 +206,6 @@ module.exports = { }), new webpack.LoaderOptionsPlugin({ options: { - // @remove-on-eject-begin - // Point ESLint to our predefined config. - eslint: { - configFile: path.join(__dirname, '../.eslintrc'), - useEslintrc: false - }, - // @remove-on-eject-end // We use PostCSS for autoprefixing only. postcss: function() { return [ @@ -238,5 +242,11 @@ module.exports = { fs: 'empty', net: 'empty', tls: 'empty' + }, + // Turn off performance hints during development because we don't do any + // splitting or minification in interest of speed. These warnings become + // cumbersome. + performance: { + hints: false } }; diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c0eca6a3aee..3ac78015ca5 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -86,10 +86,10 @@ module.exports = { resolve: { // This allows you to set a fallback for where Webpack should look for modules. // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. - // We use `fallback` instead of `root` because we want `node_modules` to "win" + // We place these paths second because we want `node_modules` to "win" // if there any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 - modules: ['node_modules', ...paths.nodePaths], + modules: ['node_modules'].concat(paths.nodePaths), // These are the reasonable defaults supported by the Node ecosystem. // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: @@ -117,7 +117,18 @@ module.exports = { { test: /\.(js|jsx)$/, enforce: 'pre', - loader: 'eslint-loader', + use: [{ + // @remove-on-eject-begin + // Point ESLint to our predefined config. + options: { + // TODO: consider separate config for production, + // e.g. to enable no-console and no-debugger only in production. + configFile: path.join(__dirname, '../.eslintrc'), + useEslintrc: false + }, + // @remove-on-eject-end + loader: 'eslint-loader' + }], include: paths.appSrc }, // Default loader: load all assets that are not handled @@ -141,7 +152,7 @@ module.exports = { /\.svg$/ ], loader: 'url-loader', - query: { + options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } @@ -152,7 +163,7 @@ module.exports = { include: paths.appSrc, loader: 'babel-loader', // @remove-on-eject-begin - query: { + options: { babelrc: false, presets: [require.resolve('babel-preset-react-app')], }, @@ -174,21 +185,23 @@ module.exports = { test: /\.css$/, loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', - loader: 'css-loader?importLoaders=1!postcss-loader' + loader: [ + { + loader: 'css-loader', + options: { + importLoaders: 1 + } + }, + 'postcss-loader' + ] }) // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, - // JSON is not enabled by default in Webpack but both Node and Browserify - // allow it implicitly so we also enable it. - { - test: /\.json$/, - loader: 'json-loader' - }, // "file" loader for svg { test: /\.svg$/, loader: 'file-loader', - query: { + options: { name: 'static/media/[name].[hash:8].[ext]' } } @@ -222,15 +235,6 @@ module.exports = { new webpack.LoaderOptionsPlugin({ minimize: true, options: { - // @remove-on-eject-begin - // Point ESLint to our predefined config. - eslint: { - // TODO: consider separate config for production, - // e.g. to enable no-console and no-debugger only in production. - configFile: path.join(__dirname, '../.eslintrc'), - useEslintrc: false - }, - // @remove-on-eject-end // We use PostCSS for autoprefixing only. postcss: function() { return [ @@ -251,8 +255,6 @@ module.exports = { // It is absolutely essential that NODE_ENV was set to production here. // Otherwise React will be compiled in the very slow development mode. new webpack.DefinePlugin(env), - // Try to dedupe duplicated modules, if any: - new webpack.optimize.DedupePlugin(), // Minify the code. new webpack.optimize.UglifyJsPlugin({ compress: { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 3f136aad4ee..9f1231f1bc6 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -52,7 +52,6 @@ "html-webpack-plugin": "2.24.0", "http-proxy-middleware": "0.17.2", "jest": "18.1.0", - "json-loader": "0.5.4", "object-assign": "4.1.0", "postcss-loader": "1.0.0", "promise": "7.1.1", @@ -62,7 +61,7 @@ "style-loader": "0.13.1", "url-loader": "0.5.7", "webpack": ">=2.2.0-rc.0 <3", - "webpack-dev-server": "1.16.2", + "webpack-dev-server": "2.2.0-rc.0", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "1.0.0" }, From d5203a878c74d191c5de372a8db73f5dca49751e Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 5 Jan 2017 15:31:58 -0500 Subject: [PATCH 03/13] Update 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 9f1231f1bc6..7efeafafea3 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -49,7 +49,7 @@ "filesize": "3.3.0", "fs-extra": "0.30.0", "gzip-size": "3.0.0", - "html-webpack-plugin": "2.24.0", + "html-webpack-plugin": "2.26.0", "http-proxy-middleware": "0.17.2", "jest": "18.1.0", "object-assign": "4.1.0", From a77a2cacc31d09b83358e833499a76de1bc7ef5e Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 18 Jan 2017 20:29:04 -0500 Subject: [PATCH 04/13] Remove LoaderOptionsPlugin from dev config --- .../config/webpack.config.dev.js | 37 +++++++++---------- packages/react-scripts/package.json | 4 +- 2 files changed, 20 insertions(+), 21 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index f6fdc2dbd6a..f5da21440ee 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -178,8 +178,24 @@ module.exports = { options: { importLoaders: 1 } - }, - 'postcss-loader' + }, { + loader: 'postcss-loader', + options: { + ident: 'postcss', + plugins: function () { + return [ + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ] + }) + ] + } + } + } ] }, // "file" loader for svg @@ -204,23 +220,6 @@ module.exports = { inject: true, template: paths.appHtml, }), - new webpack.LoaderOptionsPlugin({ - options: { - // We use PostCSS for autoprefixing only. - postcss: function() { - return [ - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ] - }), - ]; - } - } - }), // Makes some environment variables available to the JS code, for example: // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. new webpack.DefinePlugin(env), diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 7efeafafea3..42ded98fee1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -53,14 +53,14 @@ "http-proxy-middleware": "0.17.2", "jest": "18.1.0", "object-assign": "4.1.0", - "postcss-loader": "1.0.0", + "postcss-loader": "1.2.2", "promise": "7.1.1", "react-dev-utils": "^0.4.2", "recursive-readdir": "2.1.0", "strip-ansi": "3.0.1", "style-loader": "0.13.1", "url-loader": "0.5.7", - "webpack": ">=2.2.0-rc.0 <3", + "webpack": "2.2.0", "webpack-dev-server": "2.2.0-rc.0", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "1.0.0" From 545f9e727b2f1877a3727be8d6b893a0b49b71f9 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 18 Jan 2017 20:44:10 -0500 Subject: [PATCH 05/13] ExtractTextPlugin still uses webpack 1 syntax ... and doesn't support complex options (yet) --- packages/react-scripts/config/webpack.config.dev.js | 2 +- packages/react-scripts/config/webpack.config.prod.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index f5da21440ee..bdc4f1c73fc 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -181,7 +181,7 @@ module.exports = { }, { loader: 'postcss-loader', options: { - ident: 'postcss', + ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: function () { return [ autoprefixer({ diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3ac78015ca5..5af655fd182 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -188,7 +188,7 @@ module.exports = { loader: [ { loader: 'css-loader', - options: { + query: { importLoaders: 1 } }, @@ -233,7 +233,7 @@ module.exports = { } }), new webpack.LoaderOptionsPlugin({ - minimize: true, + minimize: true, // The minimize mode for loaders will be removed in webpack 3 or later. options: { // We use PostCSS for autoprefixing only. postcss: function() { From cd557450d3092aa266da0642108ca431e902e213 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 18 Jan 2017 20:48:01 -0500 Subject: [PATCH 06/13] Grammar nit --- packages/react-scripts/config/webpack.config.dev.js | 4 ++-- packages/react-scripts/config/webpack.config.prod.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index bdc4f1c73fc..e1e110d1105 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -78,8 +78,8 @@ module.exports = { resolve: { // This allows you to set a fallback for where Webpack should look for modules. // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. - // We place these paths second because we want `node_modules` to "win" - // if there any conflicts. This matches Node resolution mechanism. + // We placed these paths second because we want `node_modules` to "win" + // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 modules: ['node_modules'].concat(paths.nodePaths), // These are the reasonable defaults supported by the Node ecosystem. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 5af655fd182..79499901947 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -86,8 +86,8 @@ module.exports = { resolve: { // This allows you to set a fallback for where Webpack should look for modules. // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. - // We place these paths second because we want `node_modules` to "win" - // if there any conflicts. This matches Node resolution mechanism. + // We placed these paths second because we want `node_modules` to "win" + // if there are any conflicts. This matches Node resolution mechanism. // https://github.com/facebookincubator/create-react-app/issues/253 modules: ['node_modules'].concat(paths.nodePaths), // These are the reasonable defaults supported by the Node ecosystem. From 7c25c98a133847760728cb9e9d547a4c31bd938f Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Wed, 18 Jan 2017 21:15:40 -0500 Subject: [PATCH 07/13] Update extract text 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 42ded98fee1..476576d32be 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -44,7 +44,7 @@ "eslint-plugin-import": "2.0.1", "eslint-plugin-jsx-a11y": "2.2.3", "eslint-plugin-react": "6.4.1", - "extract-text-webpack-plugin": "2.0.0-beta.4", + "extract-text-webpack-plugin": "2.0.0-beta.5", "file-loader": "0.9.0", "filesize": "3.3.0", "fs-extra": "0.30.0", From 404228e75e014af3083728973218885ba7aebc7d Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Thu, 2 Feb 2017 20:10:38 -0500 Subject: [PATCH 08/13] - Remove webpack.LoaderOptionsPlugin - Update deps --- .../config/webpack.config.prod.js | 40 +++++++++---------- packages/react-scripts/package.json | 14 +++---- 2 files changed, 26 insertions(+), 28 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 79499901947..c38ba217252 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -188,11 +188,27 @@ module.exports = { loader: [ { loader: 'css-loader', - query: { + options: { importLoaders: 1 } - }, - 'postcss-loader' + }, { + loader: 'postcss-loader', + options: { + ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options + plugins: function () { + return [ + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ] + }) + ] + } + } + } ] }) // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. @@ -232,24 +248,6 @@ module.exports = { minifyURLs: true } }), - new webpack.LoaderOptionsPlugin({ - minimize: true, // The minimize mode for loaders will be removed in webpack 3 or later. - options: { - // We use PostCSS for autoprefixing only. - postcss: function() { - return [ - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ] - }), - ]; - } - } - }), // 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. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 476576d32be..a14ed15efda 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -34,22 +34,22 @@ "chalk": "1.1.3", "connect-history-api-fallback": "1.3.0", "cross-spawn": "4.0.2", - "css-loader": "0.26.0", + "css-loader": "0.26.1", "detect-port": "1.0.1", "dotenv": "2.0.0", "eslint": "3.8.1", "eslint-config-react-app": "^0.5.0", - "eslint-loader": "1.6.0", + "eslint-loader": "1.6.1", "eslint-plugin-flowtype": "2.21.0", "eslint-plugin-import": "2.0.1", "eslint-plugin-jsx-a11y": "2.2.3", "eslint-plugin-react": "6.4.1", - "extract-text-webpack-plugin": "2.0.0-beta.5", - "file-loader": "0.9.0", + "extract-text-webpack-plugin": "2.0.0-rc.2", + "file-loader": "0.10.0", "filesize": "3.3.0", "fs-extra": "0.30.0", "gzip-size": "3.0.0", - "html-webpack-plugin": "2.26.0", + "html-webpack-plugin": "2.28.0", "http-proxy-middleware": "0.17.2", "jest": "18.1.0", "object-assign": "4.1.0", @@ -60,8 +60,8 @@ "strip-ansi": "3.0.1", "style-loader": "0.13.1", "url-loader": "0.5.7", - "webpack": "2.2.0", - "webpack-dev-server": "2.2.0-rc.0", + "webpack": "2.2.1", + "webpack-dev-server": "2.2.1", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "1.0.0" }, From 924b087c1610bcb139f107cba6cf5617158dd280 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 4 Feb 2017 11:58:12 -0500 Subject: [PATCH 09/13] Lerna hoists packages --- packages/react-scripts/config/webpack.config.dev.js | 4 +++- packages/react-scripts/config/webpack.config.prod.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index e1e110d1105..72226ac5c41 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -98,7 +98,9 @@ module.exports = { // directory of `react-scripts` itself rather than the project directory. resolveLoader: { modules: [ - paths.ownNodeModules + paths.ownNodeModules, + // Lerna hoists everything, so we need to look in our app directory + paths.appNodeModules ] }, // @remove-on-eject-end diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c38ba217252..2e29cb0ce4d 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -106,7 +106,9 @@ module.exports = { // directory of `react-scripts` itself rather than the project directory. resolveLoader: { modules: [ - paths.ownNodeModules + paths.ownNodeModules, + // Lerna hoists everything, so we need to look in our app directory + paths.appNodeModules ] }, // @remove-on-eject-end From 451a313bab4c95563e5f5af56a5ddc1d4e3ae9ba Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 4 Feb 2017 13:13:41 -0500 Subject: [PATCH 10/13] Update extract-text-webpack-plugin --- packages/react-scripts/config/webpack.config.prod.js | 4 ++-- packages/react-scripts/package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 2e29cb0ce4d..8686f42416a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -186,8 +186,8 @@ module.exports = { { test: /\.css$/, loader: ExtractTextPlugin.extract({ - fallbackLoader: 'style-loader', - loader: [ + fallback: 'style-loader', + use: [ { loader: 'css-loader', options: { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index a14ed15efda..7862e8cfbb4 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -28,8 +28,8 @@ "babel-eslint": "7.1.1", "babel-jest": "18.0.0", "babel-loader": "6.2.10", - "babel-runtime": "^6.20.0", "babel-preset-react-app": "^2.0.1", + "babel-runtime": "^6.20.0", "case-sensitive-paths-webpack-plugin": "1.1.4", "chalk": "1.1.3", "connect-history-api-fallback": "1.3.0", @@ -44,7 +44,7 @@ "eslint-plugin-import": "2.0.1", "eslint-plugin-jsx-a11y": "2.2.3", "eslint-plugin-react": "6.4.1", - "extract-text-webpack-plugin": "2.0.0-rc.2", + "extract-text-webpack-plugin": "2.0.0-rc.3", "file-loader": "0.10.0", "filesize": "3.3.0", "fs-extra": "0.30.0", From 14bc2be88df1d6b035f4fd90efcd38b1fc8e2742 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 11 Feb 2017 01:39:53 -0500 Subject: [PATCH 11/13] Update webpack-dev-server --- packages/react-scripts/package.json | 2 +- packages/react-scripts/scripts/start.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 7a3d85f8523..371b952c8c5 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -61,7 +61,7 @@ "style-loader": "0.13.1", "url-loader": "0.5.7", "webpack": "2.2.1", - "webpack-dev-server": "2.2.1", + "webpack-dev-server": "2.3.0", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "2.0.2" }, diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index c326b9b94d9..6943f6bb95b 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -268,7 +268,8 @@ function runDevServer(host, port, protocol) { }, // Enable HTTPS if the HTTPS environment variable is set to 'true' https: protocol === "https", - host: host + host: host, + overlay: false, }); // Our custom middleware proxies requests to /index.html or a remote API. From 21ab28161e8db03d11299d5883733ec47681c837 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 11 Feb 2017 01:44:05 -0500 Subject: [PATCH 12/13] Remove imports for the tests --- packages/react-scripts/fixtures/kitchensink/.babelrc | 3 ++- .../fixtures/kitchensink/.template.dependencies.json | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/fixtures/kitchensink/.babelrc b/packages/react-scripts/fixtures/kitchensink/.babelrc index c14b2828d16..14397221e3b 100644 --- a/packages/react-scripts/fixtures/kitchensink/.babelrc +++ b/packages/react-scripts/fixtures/kitchensink/.babelrc @@ -1,3 +1,4 @@ { - "presets": ["react-app"] + "presets": ["react-app"], + "plugins": ["babel-plugin-transform-es2015-modules-commonjs"] } diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index 50511b3d16a..a20139318c1 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -1,6 +1,7 @@ { "dependencies": { "babel-register": "6.22.0", + "babel-plugin-transform-es2015-modules-commonjs": "6.22.0", "babel-polyfill": "6.20.0", "chai": "3.5.0", "jsdom": "9.8.3", From 5d36d14ee569f1b55dbbc20558f715df6985befa Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Sat, 11 Feb 2017 02:16:36 -0500 Subject: [PATCH 13/13] stop removing babelrc --- tasks/e2e-kitchensink.sh | 3 --- 1 file changed, 3 deletions(-) diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 3c750feca53..4bb45d72853 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -167,9 +167,6 @@ npm link $root_path/packages/eslint-config-react-app npm link $root_path/packages/react-dev-utils npm link $root_path/packages/react-scripts -# ...and we need to remove template's .babelrc -rm .babelrc - # Test the build REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_PATH=src \