Real world example with react, babel and code splitting by routes #7
Conversation
| { | ||
| "name": "webpack-long-term-cache-demo", | ||
| "version": "1.0.0", | ||
| "version": "2.0.0", |
There was a problem hiding this comment.
Ignore this. I just wanted to make clear that those changes is breaking everything 😸
| "mobx-react-devtools": "4.2.11", | ||
| "react": "15.4.2", | ||
| "react-dom": "15.4.2", | ||
| "react-router": "3.0.2" |
| } | ||
| } | ||
| }) | ||
| } |
There was a problem hiding this comment.
I want to experiment with route authorization and code splitting at the same time
|
|
||
| module.exports = { | ||
| entry: { | ||
| app: resolvePath('src/index.js') |
There was a problem hiding this comment.
No explicit vendor. Look 👇 down
| new webpack.optimize.CommonsChunkPlugin({ | ||
| name: 'vendor', | ||
| chunks: ['app'], | ||
| minChunks: ({ resource }) => /node_modules/.test(resource) |
There was a problem hiding this comment.
What I'm trying to do here is dynamically move all node_modules dependencies into vendor chunk.
I'm not sure if it's a good idea because my goal is to implement code splitting. That means that maybe some dependency is just used in one of our dynamic chunks (for example on route-b. Maybe it's a bad idea to have that underused dependency in vendor. We'll see.
| minChunks: ({ resource }) => /node_modules/.test(resource) | ||
| }), | ||
| new webpack.optimize.CommonsChunkPlugin({ | ||
| name: ['manifest'] |
There was a problem hiding this comment.
I'm don't know what I'm doing here.
- What is supposed to do this
commonChunks? - How works webpack manifest? there is only 1 manifest or each generated chunk generates a manifest?
This part is super confusing to me.
| }), | ||
| new InlineManifestWebpackPlugin({ | ||
| name: 'webpackManifest' | ||
| }), |
There was a problem hiding this comment.
With HtmlWebpackPlugin and InlineManifestWebpackPlugin I can see how a manifest is inline in my index.html. Is this enough?
What is this?
Hi, first of all thank you for your article I'm trying to follow because we want to accomplish these goals in our project:
The goals
I took from your example and added some big guys like react, react-router or lodash...because, well. That's our real world 😄
The plan
I will explain how I would like to accomplish our goals:
Merge this PR with your code?
Maybe your intention is to keep the example simple. I want to make clear that I'm not doing this PR to be merged (unless you see it like something positive). My plan is open it just to ask you some questions and discuss with more people. I hope this is ok for you :)
Question 1: The manifest
This part is not clear to me in the article. As far as I understand you're proposing two ways of extracting webpack manifest.
Option 1: used in your code
This option uses chunk-manifest-webpack-plugin and webpack-manifest-plugin but I think is harder to integrate with html-webpack-plugin
Option 2: using html-wp-plugin and inline-manifest
You were wondering to add html-webpack-plugin and inline-manifest-webpack-plugin to this repo in this issue
Option 2 is what I'm trying but I'm not sure if I'm doing it right. Could you check my PR?
Tree shaking
Webpack 2 tree shaking only works with
ES2015exportnot with nodemodule.exportscommonJSmodules. To have Tree shaking we need to declare oures2015babel preset in this way:modulesfalse make webpack not to convert es2015 exports intocommonJSexports. I think.