webpack 4 upgrade

[RezaHaidari]

No description provided.

[asadsahi]

great job @RezaHaidari works perfect for me. I have just upgraded based on your changes a project which is based on vue-hackernews.

[asadsahi]

@RezaHaidari in webpack.base.config.js you have added uglifyjsplugin with sourcemaps:

if (isProd) {
  config.optimization = {
    ...config.optimization,
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: {
            inline: false,
          },
        },
      }),
    ],
  };
}

But it doesn't generate any sourcemaps, alos, how different is it compared to default optimisation webpack 4 does in --mode=production?

[sirlancelot]

CommonsChunkPlugin is no longer needed, nor is UglifyJsPlugin. All of those options are abstracted in to options.optimization. They are activated depending on options.mode which should be set to either "development" or "production"

[asadsahi]

@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.

[JounQin]

the default NODE_ENV is not same as mode? And it can be removed.

[RezaHaidari]

thanks, you right

[JounQin]

Why change it?

[RezaHaidari]

"extract-text-webpack-plugin" get error : TypeError: Cannot read property 'call' of undefined
Fixing it, by adding allChunks: true
webpack/webpack#959

[asadsahi]

@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?

[RezaHaidari]

b4b2e33

[JounQin]

Why change it?

[FranckFreiburger]

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 (see https://webpack.js.org/plugins/split-chunks-plugin/#splitchunks-cachegroups)

  vendors: {
    test: function(module) {

[FranckFreiburger]

due to extract-text-webpack-plugin limitation

I wondering if mini-css-extract-plugin has the same limitation ?