Upgrade to webpack v2 #1291

Timer · 2016-12-18T20:22:42Z

webpack has had its first v2 release! 🎉

There are a few changes we're waiting on:

[email protected]
[email protected]
Allow webpack 2 rc jantimon/html-webpack-plugin#526
extract-text-webpack-plugin#309
remove LoaderOptionsPlugin for prod postcss
- Syntax should be updated to new webpack loaders syntax? webpack-contrib/extract-text-webpack-plugin#265
- Possibly a bug using options vs query. webpack-contrib/extract-text-webpack-plugin#281

would be nice:

Check up on https://twitter.com/simplesthing/status/823674445843734528 – is this affecting us?
Not all styles included in extracted css webpack-contrib/extract-text-webpack-plugin#294
2.0.0-rc.0 not removing css from bundles webpack-contrib/extract-text-webpack-plugin#366

/cc #183

bondz · 2016-12-18T20:41:47Z

packages/react-scripts/config/webpack.config.dev.js

      },
      // 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'


json-loader is no longer required in Webpack 2

You should take it out of the package.json file as well.

bondz · 2016-12-18T21:01:34Z

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"


Should the comment change?

Probably -- we don't need people to be confused.

bondz · 2016-12-18T21:27:26Z

packages/react-scripts/config/webpack.config.dev.js

@@ -134,7 +134,7 @@ module.exports = {
          /\.json$/,
          /\.svg$/
        ],
-        loader: 'url',
+        loader: 'url-loader',
        query: {


Although webpack 2 allows query, it has chosen to use options in its docs which IMO is better, would you consider changing?

bondz · 2016-12-19T10:16:41Z

packages/react-scripts/config/webpack.config.dev.js

+  // splitting or minification in interest of speed. These warnings become
+  // cumbersome.
+  performance: {
+    hints: false


Since this is turned off completely during development and by default set to warning in the production config, it might come as a surprise to users to then have to tweak their app for code-splitting, although extracting css should bring the file size down. @TheLarkInn gives a reason to leave it enabled in dev builds. We could tweak the maxAssetSize and maxEntrypointSize options to reasonable file sizes instead. What do you think?

I don't think it's very valuable in its certain form -- I think we need to go a step further and show our own warnings more in line with what @TheLarkInn was saying.

Currently, we don't display build size warnings -- and bundle size is going to vary wildly between end-users. I don't think there is a good "default" we can set which will cover all cases (and we don't want to expose configuration unless it's a feature we want to support for the foreseeable future of cra; even if we switch bundlers).

Knowing this, I think that monitoring build size between rebuilds would be beneficial to let the user know their bundle has grown -- maybe doing some caching so we can display warnings between restarts/sessions.

Since the feature isn't there now, I think we can safely disable it completely until we implement said feature or wait for more detailed [json] performance hints from webpack.

I agree 👍

Just a note, performance hints are now off by default in rc4:
https://github.com/webpack/webpack/releases/tag/v2.2.0-rc.4

Should this be set to warning in production now?

What kind of additional details are you looking for? At the least I'd recommend having it as "warning" in Production as well.

bondz

Remove unused json-loader from the package.json file.

bondz · 2016-12-19T13:14:53Z

packages/react-scripts/config/webpack.config.dev.js

-      {
-        test: /\.json$/,
-        loader: 'json'
+        loader: 'style-loader!css-loader?importLoaders=1!postcss-loader'


To apply multiple loaders, webpack 2 uses the use option.

Out of curiosity, is this old syntax still supported?

Doesn't seem to work. webpack treats the whole string as a single loader throwing a Module not found: Error: Can't resolve ...

Nice! (That syntax is so confusing.)

use

use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ]

existentialism · 2016-12-19T15:55:03Z

Probably need to bump a few deps for peerDep warnings:

And wait for some pending version bumps:

gaearon · 2016-12-19T15:56:39Z

packages/react-scripts/config/webpack.config.dev.js

@@ -213,6 +187,30 @@ module.exports = {
      inject: true,
      template: paths.appHtml,
    }),
+    new webpack.LoaderOptionsPlugin({


Ideally we shouldn't have this section and instead pass options to loaders. (If those loaders support the new API.)

bondz · 2016-12-19T16:46:16Z

packages/react-scripts/config/webpack.config.prod.js

-        loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss')
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: 'css-loader?importLoaders=1!postcss-loader'


This could also be written as

loader: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ]

bondz · 2016-12-20T08:52:23Z

Some other dependencies are outdated, should those deps be updated as well? In a separate PR, I could send one.

Timer · 2016-12-20T15:49:57Z

Some other dependencies are outdated, should those deps be updated as well? In a separate PR, I could send one.

I've always wondered the same and if we should track these dependencies through their new versions.
I feel like the general consensus is if it works, leave it as it is. If we update dependencies we might introduce breakages due to bugs in package updates.
To update dependencies safely, we need extensive unit testing beyond the current smoke test -- this is on the horizon.

wtgtybhertgeghgtwtg · 2016-12-21T04:36:24Z

Would that mean enabling Greenkeeper after #1187 lands?

Timer · 2016-12-21T05:14:42Z

We'll have to open a discussion issue about it -- I can think of plenty of reasons to argue for and against it.
However, with an appropriate test suite, I don't believe it could hurt.

Anyway, this PR is currently blocked on waiting for a few dependencies to update. Hopefully webpack 2.x is fully released by this time. 😄

kpuputti · 2017-01-04T12:43:20Z

The linked html-webpack-plugin PR is now merged and released, so that dependency can be checked. \o/

Timer · 2017-01-05T20:34:56Z

Neat, thanks for the update @kpuputti!

existentialism · 2017-01-13T16:26:52Z

Can bump to [email protected] now! 🙌

(Should continue tracking a few blockers to release tho)

kirkaustin · 2017-01-18T16:36:31Z

Webpack 2.2.0 has been released.

Timer · 2017-01-19T01:43:01Z

Thanks @existentialism -- I've added the biggest two blockers for us to the OP.

Thanks @kirkaustin, I've updated this PR accordingly. 👍

gaearon · 2017-01-23T20:13:16Z

Tagging this for 0.10 together with other major features.

SpaceK33z · 2017-01-25T19:05:29Z

packages/react-scripts/package.json

-    "webpack": "1.14.0",
-    "webpack-dev-server": "1.16.2",
+    "webpack": "2.2.0",
+    "webpack-dev-server": "2.2.0-rc.0",


webpack-dev-server 2.2.0 was released a few days ago :).

sashakru · 2017-01-30T16:33:08Z

This two issues are closed:

webpack-contrib/extract-text-webpack-plugin#265
webpack-contrib/extract-text-webpack-plugin#281

0xjocke · 2017-02-01T10:49:05Z

packages/react-scripts/config/webpack.config.prod.js

+          loader: [
+            {
+              loader: 'css-loader',
+              query: {


query -> options?

That change is pending on webpack-contrib/extract-text-webpack-plugin#281, which I believe has gone through.

Timer · 2017-02-11T07:31:50Z

CI passing 🎉

Timer · 2017-02-11T19:10:31Z

🚀 let's do it!

gaearon · 2017-02-11T19:17:01Z

* Upgrade webpack * Address more webpack v2 ... * Update html-webpack-plugin * Remove LoaderOptionsPlugin from dev config * ExtractTextPlugin still uses webpack 1 syntax ... and doesn't support complex options (yet) * Grammar nit * Update extract text webpack plugin * - Remove webpack.LoaderOptionsPlugin - Update deps * Lerna hoists packages * Update extract-text-webpack-plugin * Update webpack-dev-server * Remove imports for the tests * stop removing babelrc

sublimeye · 2017-02-20T18:03:05Z

@Timer Is this change should be already available when installing a new app? I'm still getting [email protected] with a fresh installation.

Created a bug just in case #1599

gaearon · 2017-02-20T18:03:33Z

Just because something was merged, doesn't mean it was released 😉 .

Timer · 2017-02-20T18:03:37Z

No @sublimeye, it is only available in master and must be installed manually.

edit: please be aware that using master is strictly for testing purposes and not considered stable, see @gaearon's comment below.

gaearon · 2017-02-20T18:04:38Z

Just to be clear, I wouldn't recommend installing it manually to anyone. We're still working out the issues, and master is never considered fully stable.

You can see the milestone for each issue and PR:

Compare it to the latest release to know if something is released or not.

* Upgrade webpack * Address more webpack v2 ... * Update html-webpack-plugin * Remove LoaderOptionsPlugin from dev config * ExtractTextPlugin still uses webpack 1 syntax ... and doesn't support complex options (yet) * Grammar nit * Update extract text webpack plugin * - Remove webpack.LoaderOptionsPlugin - Update deps * Lerna hoists packages * Update extract-text-webpack-plugin * Update webpack-dev-server * Remove imports for the tests * stop removing babelrc

SimenB · 2017-03-02T07:35:46Z

packages/react-scripts/package.json

    "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": "1.0.1",
+    "extract-text-webpack-plugin": "2.0.0-rc.3",


2.0.0 has been released

https://github.com/webpack-contrib/extract-text-webpack-plugin/releases/tag/v2.0.0

EDIT: This is already merged: #1700

gaearon · 2017-03-02T12:40:41Z

@shai32

When everything tagged for 0.10 is ready. We don’t delay releases because we want to—we delay them because there are outstanding bugs (in CRA or underlying tools), or because there are features we still want to get in. Maybe you want to help?

* Upgrade webpack * Address more webpack v2 ... * Update html-webpack-plugin * Remove LoaderOptionsPlugin from dev config * ExtractTextPlugin still uses webpack 1 syntax ... and doesn't support complex options (yet) * Grammar nit * Update extract text webpack plugin * - Remove webpack.LoaderOptionsPlugin - Update deps * Lerna hoists packages * Update extract-text-webpack-plugin * Update webpack-dev-server * Remove imports for the tests * stop removing babelrc

shai32 · 2017-03-03T11:12:36Z

Sorry for asking for release date, will not do it again.
Thanks for anyone who contribute to this project.

gaearon · 2017-03-03T19:09:20Z

No worries, I’m sorry if my message sounded combative 😞 .

I just meant that we don’t really have any specific day in mind—it’ll take some time to fix all the issues, and help is welcome.

iddan · 2017-03-12T00:12:19Z

For some reason even though I upgraded the package it still installs me webpack 1

gaearon · 2017-03-12T00:20:17Z

Have you had a chance to read the comments above asking the very same question?
😉

viksit · 2017-03-21T01:21:13Z

@gaearon @Timer how do you recommend manually installing CRA from github? I've tried npm install -g git+https://github.com/facebookincubator/create-react-app.git but that results in a

npm ERR! No name provided in package.json

npm ERR! A complete log of this run can be found in: ...

What am I doing wrong?

gaearon · 2017-03-21T01:30:35Z

We don't support installing from GitHub (and that won't help you anyway because the CLI is not where the code lives).

Please don't rush to migrate to Webpack 2 because it's cool. We'll release support for it when it's fully ready. Give it some time please.

If you absolutely insist on trying it, there's an unstable, possibly buggy, nightly canary build of react-scripts that includes Webpack 2. I will lock this thread and won't tell you how to find it because if it's posted here, then every beginner will attempt to use it, and their projects will break in unexpected ways. But if you know how to find unstable npm package versions, then feel free to give it a try and report any issues 😉 .

gaearon · 2017-05-16T09:18:31Z

Please help beta test the new version that includes this change!
#2172

facebook-github-bot added the CLA Signed label Dec 18, 2016

bondz reviewed Dec 18, 2016

View reviewed changes

bondz reviewed Dec 19, 2016

View reviewed changes

bondz suggested changes Dec 19, 2016

View reviewed changes

bondz reviewed Dec 19, 2016

View reviewed changes

gaearon reviewed Dec 19, 2016

View reviewed changes

bondz reviewed Dec 19, 2016

View reviewed changes

Timer force-pushed the webpack-v2 branch from 77ad592 to 5466e20 Compare December 20, 2016 01:27

wtgtybhertgeghgtwtg mentioned this pull request Dec 21, 2016

Upgrade webpack to webpack2 #1302

Closed

Timer force-pushed the webpack-v2 branch from 5466e20 to bbdf95f Compare January 5, 2017 20:34

ianschmitz mentioned this pull request Jan 18, 2017

Consider using Webpack 2 #183

Closed

Timer force-pushed the webpack-v2 branch from bbdf95f to 9aea612 Compare January 19, 2017 01:44

gaearon added this to the 0.10.0 milestone Jan 23, 2017

SpaceK33z reviewed Jan 25, 2017

View reviewed changes

andreypopp mentioned this pull request Jan 30, 2017

0.51.1 regressed on CRA based apps pnpm/pnpm#581

Closed

0xjocke reviewed Feb 1, 2017

View reviewed changes

Timer added tag: breaking change tag: enhancement tag: underlying tools labels Feb 11, 2017

stop removing babelrc

5d36d14

Merge remote-tracking branch 'upstream/master' into webpack-v2

2ef6113

Timer merged commit 1228883 into facebook:master Feb 11, 2017

Timer deleted the webpack-v2 branch February 11, 2017 19:11

Timer changed the title ~~Upgrade webpack~~ Upgrade to webpack v2 Feb 11, 2017

sebastianrothe mentioned this pull request Feb 16, 2017

Webpack 2.0 infernojs/create-inferno-app#23

Closed

axelson mentioned this pull request Feb 23, 2017

Upgrade to webpack v2 #189

Closed

SimenB reviewed Mar 2, 2017

View reviewed changes

facebook locked and limited conversation to collaborators Mar 21, 2017

		@@ -81,12 +81,12 @@ module.exports = {
		// We use `fallback` instead of `root` because we want `node_modules` to "win"

Upgrade to webpack v2 #1291

Upgrade to webpack v2 #1291

Conversation

Timer commented Dec 18, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Timer Dec 19, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bondz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

existentialism commented Dec 19, 2016 • edited by Timer Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bondz commented Dec 20, 2016

Timer commented Dec 20, 2016 • edited Loading

wtgtybhertgeghgtwtg commented Dec 21, 2016

Timer commented Dec 21, 2016

kpuputti commented Jan 4, 2017

Timer commented Jan 5, 2017

existentialism commented Jan 13, 2017 • edited Loading

kirkaustin commented Jan 18, 2017

Timer commented Jan 19, 2017

gaearon commented Jan 23, 2017

Choose a reason for hiding this comment

sashakru commented Jan 30, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Timer commented Feb 11, 2017

Timer commented Feb 11, 2017

gaearon commented Feb 11, 2017 • edited Loading

sublimeye commented Feb 20, 2017 • edited Loading

gaearon commented Feb 20, 2017

Timer commented Feb 20, 2017 • edited Loading

gaearon commented Feb 20, 2017

SimenB Mar 2, 2017 • edited Loading

Choose a reason for hiding this comment

gaearon commented Mar 2, 2017

shai32 commented Mar 3, 2017

gaearon commented Mar 3, 2017

iddan commented Mar 12, 2017

gaearon commented Mar 12, 2017 • edited Loading

viksit commented Mar 21, 2017 • edited Loading

gaearon commented Mar 21, 2017

gaearon commented May 16, 2017

Timer commented Dec 18, 2016 •

edited

Loading

Timer Dec 19, 2016 •

edited

Loading

existentialism commented Dec 19, 2016 •

edited by Timer

Loading

Timer commented Dec 20, 2016 •

edited

Loading

existentialism commented Jan 13, 2017 •

edited

Loading

gaearon commented Feb 11, 2017 •

edited

Loading

sublimeye commented Feb 20, 2017 •

edited

Loading

Timer commented Feb 20, 2017 •

edited

Loading

SimenB Mar 2, 2017 •

edited

Loading

gaearon commented Mar 12, 2017 •

edited

Loading

viksit commented Mar 21, 2017 •

edited

Loading