Upgrade to webpack v2 #189

mxstbr · 2016-07-25T19:25:48Z

This is a first step towards webpack 2. Everything builds and works just fine.

Build stats:

v1

4.0K    build/84287d09b8053c6fa598893b8910786a.svg
 28K    build/favicon.ico
4.0K    build/index.html
140K    build/main.c7a1d762a452b452a7e7.js
4.0K    build/main.7cbecfc47e1de8546c1a31e27e545145.css
4.0K    build/main.7cbecfc47e1de8546c1a31e27e545145.css.map
1.5M    build/main.c7a1d762a452b452a7e7.js.map

v2

4.0K    build/84287d09b8053c6fa598893b8910786a.svg
 28K    build/favicon.ico
4.0K    build/index.html
140K    build/main.3e41bc8b11563538fb8e.js
4.0K    build/main.5d2cacffab6444a5357d533f016e1b6d.css
4.0K    build/main.5d2cacffab6444a5357d533f016e1b6d.css.map

I think nothing is different because we have to not use babel-plugin-transform-es2015-modules-commonjs, which is what babel-preset-es2015-webpack does so we get the benefits of tree shaking.

Annoyingly we're using babel-preset-es2016, which doesn't have a babel-preset-es2016-webpack with babel-plugin-transform-es2015-modules-commonjs removed!

Would appreciate somebody forking babel-preset-es2016, removing that, publishing it and trying it with this PR!

I'm going to bed now, feel free to continue the work against the webpack-v2 branch!

mxstbr · 2016-07-25T19:28:33Z

package.json

@@ -46,7 +46,7 @@
    "eslint-plugin-import": "1.10.3",
    "eslint-plugin-jsx-a11y": "2.0.1",
    "eslint-plugin-react": "5.2.2",
-    "extract-text-webpack-plugin": "1.0.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.3",


Needed otherwise webpack fails with an error.

I think we must remove caret because it's in beta and api can be changed.
I faced with this today.

Ah yeah, that was an accident! Good catch!

gaearon · 2016-07-25T19:47:49Z

Annoyingly we're using babel-preset-es2016, which doesn't have a babel-preset-es2016-webpack with babel-plugin-transform-es2015-modules-commonjs removed!

Don’t worry about it, it is literally just exponentiation operator. All the meat is in 2016, and it doesn’t include 2015 by itself.

gaearon · 2016-07-25T19:48:29Z

package.json

@@ -56,7 +56,7 @@
    "rimraf": "2.5.3",
    "style-loader": "0.13.1",
    "url-loader": "0.5.7",
-    "webpack": "1.13.1",
+    "webpack": "^2.1.0-beta.20",


Also caret here

gaearon · 2016-07-25T19:48:45Z

I’d never think it would be so easy 😄

mxstbr · 2016-07-25T20:05:50Z

Removed babel-preset-es2016 and built again, these are the stats:

4.0K    build/84287d09b8053c6fa598893b8910786a.svg
 28K    build/favicon.ico
4.0K    build/index.html
140K    build/main.3e41bc8b11563538fb8e.js
4.0K    build/main.5d2cacffab6444a5357d533f016e1b6d.css
4.0K    build/main.5d2cacffab6444a5357d533f016e1b6d.css.map

Same size for the main bundle, not 100% if that's expected or not anymore.

Also just realized that the .js.map is missing – is there any reason we're emitting source maps in production?

gaearon · 2016-07-25T20:15:06Z

Also just realized that the .js.map is missing – is there any reason we're emitting source maps in production?

To help debug issues, people can always delete them if they want to.

gaearon · 2016-07-25T20:16:26Z

Removed babel-preset-es2016

Why? I meant that it’s orthogonal to commonjs support, not that it needs to be removed 😉

sokra · 2016-07-25T20:17:11Z

Also just realized that the .js.map is missing

Pass sourceMap: true to the UglifyJsPlugin.

gaearon · 2016-07-25T20:17:33Z

Same size for the main bundle, not 100% if that's expected or not anymore.

Sure, we wouldn’t get any benefits with vanilla React. I’m more interested in Webpack 2 because it’s easier to get fixes into it than backport them to 1.x.

sokra · 2016-07-25T20:20:03Z

resolveLoader.root need to be changed too -> resolveLoader.modules

taion · 2016-07-26T01:14:41Z

config/babel.prod.js

@@ -9,8 +9,7 @@

 module.exports = {
  presets: [
-    'babel-preset-es2015',


Huh, it's weird that this isn't es2015-loose. I can't think of any good reason to not use es2015-loose (and correspondingly es2015-loose-native-modules instead of either es2015-native-modules or es2015-webpack) for production.

What's the difference?

It makes all the transforms run in loose mode. It's like es2015-loose.

It's like es2015-loose.

Haha that's what I'm asking, what is loose mode?

Loose mode generates code that is simpler, but less strictly compliant to spec. Compare output:

es2015-loose

es2015

I'm not aware of any reason to not at least run your production build in loose mode. I'm also not aware of anybody who deliberately uses non-loose mode.

Yeah that's it, some people would rather be compliant to the spec even though there's more output, etc

mxstbr · 2016-07-26T04:52:12Z

Why? I meant that it’s orthogonal to commonjs support, not that it needs to be removed 😉

I wish that was the case, but if I understand this correctly it isn't! It includes transform-modules-commonjs: https://github.com/hzoo/babel-preset-es2016/blob/4a6acc58215f07d4cb4377cfe1c344f79bae53c2/index.js#L22

mxstbr · 2016-07-26T05:11:09Z

Well, Node 4 with npm 2 fails because there's lots of invalid peerDependencies. Let me see if I can figure that out…

EDIT

Wait, what am I missing here, doesn't webpack@2.1.0-beta.20 satisfy all of those peerDeps?

npm ERR! peerinvalid The package webpack@2.1.0-beta.20 does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer babel-loader@6.2.4 wants webpack@1 || ^2.1.0-beta
npm ERR! peerinvalid Peer extract-text-webpack-plugin@2.0.0-beta.3 wants webpack@^2.1.0-beta
npm ERR! peerinvalid Peer html-webpack-plugin@2.22.0 wants webpack@*
npm ERR! peerinvalid Peer webpack-dev-server@1.14.1 wants webpack@>=1.3.0 <3

taion · 2016-07-26T05:50:45Z

You have the wrong version of webpack-dev-server

taion · 2016-07-26T05:50:59Z

aka npm error messages are useless

vladshcherbin · 2016-07-26T07:17:22Z

Try using es2015-loose-native-modules for babel, works great with webpack 2 and is dead simple.

hzoo · 2016-07-26T11:48:29Z

@mxstbr that repo is the old one, before I asked to move it to babel. es2016 just includes the exponential operator https://github.com/babel/babel/tree/master/packages/babel-preset-es2016

taion · 2016-07-26T16:24:00Z

I wish it were named es2015-native-modules-loose ._. the name feels so awkward

hzoo · 2016-07-26T18:16:37Z

@taion What we really need to do is just merge babel/babel#3331 it again if it makes sense) @loganfsmyth - then everyone can just use es2015.

taion · 2016-07-26T18:46:18Z

@hzoo That'd be fantastic if it could happen. It's just painful to set up Babel to produce both a CJS and an ES module build right now.

gaearon · 2016-07-26T21:24:33Z

Update: let’s keep it open but hold it off until Webpack 2 is out of beta. Thanks for your effort!
Why: #183 (comment).

gaearon · 2016-08-02T12:07:08Z

Meh, keeping it open doesn’t help anyone. I really appreciate your work on this @mxstbr, and I’ll dig it up when Webpack 2 is stable / more official. Thanks!

mxstbr · 2016-08-02T12:54:48Z

Yeah I was wondering about that 😁

axelson · 2017-02-23T21:45:31Z

FYI: #1291 was merged instead of this

Upgrade to webpack v2

3fc5fb6

ghost added the CLA Signed label Jul 25, 2016

mxstbr mentioned this pull request Jul 25, 2016

Consider using Webpack 2 #183

Closed

mxstbr reviewed Jul 25, 2016
View reviewed changes

gaearon reviewed Jul 25, 2016
View reviewed changes

mxstbr added 2 commits July 25, 2016 22:01

Remove babel-preset-es2016

2466010

Remove carets

8b33bde

taion reviewed Jul 26, 2016
View reviewed changes

mxstbr added 2 commits July 26, 2016 06:53

Reenable UglifyJS source maps

c775b39

resolveLoader.root -> resolveLoader.modules

8911fef

mxstbr force-pushed the webpack-v2 branch from 546a950 to 8911fef Compare July 26, 2016 05:05

ghost added the CLA Signed label Jul 26, 2016

taion mentioned this pull request Jul 26, 2016

Use es2015-loose Babel preset in production build #198

Closed

Increment webpack-dev-server version, remove caret

4b99807

ghost added the CLA Signed label Jul 26, 2016

insin mentioned this pull request Jul 26, 2016

Webpack 2 insin/nwb#110

Closed

taion mentioned this pull request Jul 26, 2016

Proposal: run and watch scripts to use different entry points #218

Closed

ghost added the CLA Signed label Jul 26, 2016

facebook-github-bot added the CLA Signed label Jul 26, 2016

gaearon closed this Aug 2, 2016

mxstbr deleted the webpack-v2 branch August 2, 2016 12:54

vladshcherbin mentioned this pull request Aug 14, 2016

Tree shaking completely broken? webpack/webpack#2867

Closed

thangngoc89 mentioned this pull request Aug 22, 2016

Migrate towards webpack 2 amilajack/popcorn-time-desktop#141

Closed

lock bot locked and limited conversation to collaborators Jan 21, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to webpack v2 #189

Upgrade to webpack v2 #189

mxstbr commented Jul 25, 2016 •

edited

Loading

mxstbr Jul 25, 2016

7rulnik Jul 25, 2016

mxstbr Jul 25, 2016

gaearon commented Jul 25, 2016

gaearon Jul 25, 2016

gaearon commented Jul 25, 2016

mxstbr commented Jul 25, 2016

gaearon commented Jul 25, 2016

gaearon commented Jul 25, 2016

sokra commented Jul 25, 2016

gaearon commented Jul 25, 2016

sokra commented Jul 25, 2016

taion Jul 26, 2016

mxstbr Jul 26, 2016

taion Jul 26, 2016

mxstbr Jul 26, 2016

taion Jul 26, 2016

hzoo Jul 26, 2016

mxstbr commented Jul 26, 2016 •

edited

Loading

mxstbr commented Jul 26, 2016 •

edited

Loading

taion commented Jul 26, 2016

taion commented Jul 26, 2016

vladshcherbin commented Jul 26, 2016

hzoo commented Jul 26, 2016 •

edited

Loading

taion commented Jul 26, 2016

hzoo commented Jul 26, 2016

taion commented Jul 26, 2016

gaearon commented Jul 26, 2016

gaearon commented Aug 2, 2016

mxstbr commented Aug 2, 2016

axelson commented Feb 23, 2017

Upgrade to webpack v2 #189

Upgrade to webpack v2 #189

Conversation

mxstbr commented Jul 25, 2016 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jul 25, 2016

Choose a reason for hiding this comment

gaearon commented Jul 25, 2016

mxstbr commented Jul 25, 2016

gaearon commented Jul 25, 2016

gaearon commented Jul 25, 2016

sokra commented Jul 25, 2016

gaearon commented Jul 25, 2016

sokra commented Jul 25, 2016

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

mxstbr commented Jul 26, 2016 • edited Loading

mxstbr commented Jul 26, 2016 • edited Loading

taion commented Jul 26, 2016

taion commented Jul 26, 2016

vladshcherbin commented Jul 26, 2016

hzoo commented Jul 26, 2016 • edited Loading

taion commented Jul 26, 2016

hzoo commented Jul 26, 2016

taion commented Jul 26, 2016

gaearon commented Jul 26, 2016

gaearon commented Aug 2, 2016

mxstbr commented Aug 2, 2016

axelson commented Feb 23, 2017

mxstbr commented Jul 25, 2016 •

edited

Loading

mxstbr commented Jul 26, 2016 •

edited

Loading

mxstbr commented Jul 26, 2016 •

edited

Loading

hzoo commented Jul 26, 2016 •

edited

Loading