- Notifications
You must be signed in to change notification settings - Fork2.1k
webpack 4 upgrade#293
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
base:master
Are you sure you want to change the base?
Uh oh!
There was an error while loading.Please reload this page.
Conversation
asadsahi commentedMar 5, 2018 • edited
Loading Uh oh!
There was an error while loading.Please reload this page.
edited
Uh oh!
There was an error while loading.Please reload this page.
great job@RezaHaidari works perfect for me. I have just upgraded based on your changes a project which is based on vue-hackernews. |
asadsahi commentedMar 5, 2018
@RezaHaidari in webpack.base.config.js you have added uglifyjsplugin with sourcemaps: But it doesn't generate any sourcemaps, alos, how different is it compared to default optimisation webpack 4 does in --mode=production? |
CommonsChunkPlugin is no longer needed, nor is UglifyJsPlugin. All of those options are abstracted in to |
asadsahi commentedMar 5, 2018
@sirlancelot you are right. But I was also wondering how to enable sourcemaps in production with --mode=production. First I though this pull request is achiving that with uglifyjsplugin, but there must be an lternative with defaults. |
build/webpack.client.config.js Outdated
| @@ -19,26 +19,31 @@ const config = merge(base, { | |||
| 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), | |||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
the defaultNODE_ENV is not same asmode? And it can be removed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
thanks, you right
| new webpack.optimize.ModuleConcatenationPlugin(), | ||
| new ExtractTextPlugin({ | ||
| filename: 'common.[chunkhash].css' | ||
| filename: 'common.[chunkhash].css', | ||
| allChunks: true |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Why change it?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
"extract-text-webpack-plugin" get error : TypeError: Cannot read property 'call' of undefined
Fixing it, by adding allChunks: true
webpack/webpack#959
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
@RezaHaidari I can't see any issues with existing ExtractTextPlugin config. Also following config isn't needed as well I guess as by setting mode to production it minifies the code anyway.
if (isProd) { config.optimization = { ...config.optimization, minimizer: [ new UglifyJsPlugin({ sourceMap: true, uglifyOptions: { compress: { inline: false, }, }, }), ], };}Any comments?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
package.json Outdated
| @@ -4,7 +4,7 @@ | |||
| "author": "Evan You <yyx990803@gmail.com>", | |||
| "private": true, | |||
| "scripts": { | |||
| "dev": "node server", | |||
| "dev": "cross-env NODE_ENV=developmentnode server", | |||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
Why change it?
| splitChunks:{ | ||
| chunks:"initial", | ||
| cacheGroups: { | ||
| vendors: function (module) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
I tried your code using webpack 4.23.1 and it fails with a "TypeError: cacheGroup.getName is not a function"
The correct form for cacheGroups entries seems different (seehttps://webpack.js.org/plugins/split-chunks-plugin/#splitchunks-cachegroups)
vendors: { test: function(module) {| return ( | ||
| // it's inside node_modules | ||
| /node_modules/.test(module.context) && | ||
| // and not a CSS file (due to extract-text-webpack-plugin limitation) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others.Learn more.
due to extract-text-webpack-plugin limitation
I wondering ifmini-css-extract-plugin has the same limitation ?
No description provided.