With the latest major Webpack release (version 4.x), we are at a point where you don't need a config to get started. It is optimized by default (#0...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks, we don't always have the time to "diff" a build configuration for a major upgrade of webpack. Nice summary. :)
BTW, using module lazy loading, it used to need a well configured serie of plugins to avoid hash changing all the time for each chunk, even without code changes. Have you checked that hashes are constant?
Interesting, I just verified, the hashes do stay consistent through multiple builds as long as the contents don't change.
Might be some other that plugin may be constantly changing something in your build or just a bug in Webpack that probably got fixed in later versions.
Theres hash and contenthash. The latter is computed from chunk content (is deterministic, i hope), so the same input gives same output. Hash is global for the build afair.
I would not use that babel config if I were you, take a look at jamie.build/last-2-versions
That's a very good point although I think using
last 2 major versions, not deadvs a % might be a more robust alternative. That will remove older browsers that aren't supported any longer as well as include the latest versions regardless of market share.Too much targetting of old browsers and you end up with a lot more code than is feasible. Sometimes its just better to let users know that old, insecure browser is not supported.
I'd remove the exclude: node_modules from the babel config that way we can use the "module" field from the package.json of each dependency and get better treeshaking.
Interesting, I didn't think of that. In my production app, I actually had to put all node_modules through babel for better browser compatibility but I've always considered it big no no since it increases build time.
yeah that's why for example create-react-app sets cache to true for stuff coming from node_modules and no cache for stuff coming from our includes :)
i am getting warn from your recent repo : pevn
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: webpack.js.org/configuration/mode/
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
index.12b2edea2b42c9e4ac90.js (981 KiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
index (981 KiB)
index.css
index.12b2edea2b42c9e4ac90.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit webpack.js.org/guides/code-splitting/
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!client/css/index.css:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./client/css/index.css 358 bytes {0} [built]
[1] ./node_modules/css-loader/dist/runtime/api.js 2.46 KiB {0} [built]
ℹ ｢wdm｣: Compiled with warnings.
Very good article!
This is great. Nice work Jesal!
Noice! 👍
I understand the importance of Babel pretty easily. I don't see the importance of Webpack and when it would be best used. Can someone help me out?
Well, the async imports are done by webpack. Modules resolution. Minification. And couple more if you add plugins ;)
Exactly what I’m looking for! Thanks, Jesal.
Thanks! I keep getting invalid sourcemap errors, any idea what that could be?