[JS] When upgrade Webpack from v3 to v4…

[JS] When upgrade Webpack from v3 to v4…

When I upgraded Webpack from v3 to v4, I got a bunch of errors. I already get used to encountering the errors when I upgrade the Webpack, sigh027

The first 2 errors I encountered were CommonsChunkPlugin and UglifyJsPlugin.

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
...
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.



Well, as a software developer, one of the most important skills is Google. So I google it…
And I found this and this, so I installed uglifyjs-webpack-plugin and modified a part of the webpack.config.js file as below:

    plugins: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false
          },
          sourceMap: true
        }
      })
    ]

When I rebuilt the project again, the UglifyJsPlugin error was gone. Good, let’s move forward. Then I found this, so I removed the old webpack.optimize.CommonsChunkPlugin and replaced it using the following code:

  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  }

So far so good, let’s try again…

$ node build/build.js
⠋ building for production...(node:7568) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
⠼ building for production.../client-vue/node_modules/webpack/lib/Chunk.js:460
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/client-vue/node_modules/webpack/lib/Chunk.js:460:9)
    at /client-vue/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
...

CommonsChunkPlugin error was gone. But what’s it this time??? Where the hell “DeprecationWarning” is coming from?030

When I checked the error message thoroughly, I realised this error must be related to extract-text-webpack-plugin. Alright, keep googling… then I found this this time. It looked like this issue was easy to be fixed because I just need to run npm i -D extract-text-webpack-plugin@next.

Be patient and try again.

$ node build/build.js
Hash: 0dbb46edbe6a16e23fc9
Version: webpack 4.1.1
Time: 36867ms
Built at: 3/8/2018 7:35:28 PM
                                              Asset      Size  Chunks  Chunk Names
                      static/img/report.ec149f3.png  11.1 KiB          
                     static/img/spinner.c53b03f.gif  52.9 KiB          
  static/img/connect-logo-on-dark-small.f5e0ee3.png  19.8 KiB          
           static/js/common.f31f49c8b110391153fa.js  1.04 KiB       0  common
                static/js/1.43d5b759ed53bd4cb0ce.js   867 KiB       1  app
static/css/app.0d1a3792aca9df37a68141515fc12c8e.css   161 KiB       1  app
Entrypoint app = static/js/common.f31f49c8b110391153fa.js static/js/1.43d5b759ed53bd4cb0ce.js static/css/app.0d1a3792aca9df37a68141515fc12c8e.css

ERROR in static/js/common.f31f49c8b110391153fa.js from UglifyJs
TypeError: Cannot read property 'sections' of null
    at new SourceMapConsumer (/client-vue/node_modules/source-map/lib/source-map-consumer.js:20:20)
    at /client-vue/node_modules/uglifyjs-webpack-plugin/dist/index.js:141:27
    at Array.forEach (<anonymous>)
...

WTF!! What are those red errors?? Durrrrrrr… 062 I’ve already installed it and modified the config file. Did I do anything wrong with UglifyJsPlugin??

Calm down, I told myself. Took a deep breath and Gooooogle and I found this. I need to place new UglifyJsPlugin in the optimization.minimizer{} section instead of plugin{} section as below. Alright let’s modify the config file again:

  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    },
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false
          },
          sourceMap: true
        }
      })
    ]
  }

Okay, let’s try again and pray…084

$ node build/build.js
Hash: d62cd98570735846a8ca
Version: webpack 4.1.1
Time: 36974ms
Built at: 3/8/2018 7:55:47 PM
                                                  Asset       Size  Chunks                    Chunk Names
                          static/img/report.ec149f3.png   11.1 KiB          [emitted]         
                         static/img/spinner.c53b03f.gif   52.9 KiB          [emitted]         
      static/img/connect-logo-on-dark-small.f5e0ee3.png   19.8 KiB          [emitted]         
                    static/js/0.cd701dd073332a88e4ff.js    847 KiB       0  [emitted]  [big]  vendors
                  static/js/app.fff1741b519c40d7b7f6.js    112 KiB       1  [emitted]         app
    static/css/app.04ff3d498277fd4a3c861abe3097adca.css     23 KiB       1  [emitted]         app
static/css/vendors.aea8d863f6fb594af53497c9eff4f427.css    138 KiB       0  [emitted]         vendors
                                             index.html  478 bytes          [emitted]         
Entrypoint app [big] = static/js/0.cd701dd073332a88e4ff.js static/css/vendors.aea8d863f6fb594af53497c9eff4f427.css static/js/app.fff1741b519c40d7b7f6.js static/css/app.04ff3d498277fd4a3c861abe3097adca.css

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  static/js/0.cd701dd073332a88e4ff.js (847 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:
  app (1.09 MiB)
      static/js/0.cd701dd073332a88e4ff.js
      static/css/vendors.aea8d863f6fb594af53497c9eff4f427.css
      static/js/app.fff1741b519c40d7b7f6.js
      static/css/app.04ff3d498277fd4a3c861abe3097adca.css

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 https://webpack.js.org/guides/code-splitting/

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

Done in 51.75s.

Hoooohoohooo, here we go. Although there are still a couple of warning messages, it was built successfully.077

By the way, can Webpack please stop annoying us when do update???


When I updated my another React project, I had another error.

compilation.mainTemplate.applyPluginsWaterfall is not a function
    at /var/www/myproject/node_modules/html-webpack-plugin/lib/compiler.js:81:

It’s very weird because I’ve already updated html-webpack-plugin to the latest version. It’s okay, nothing can stop me. …Google

And I found this. You need to run npm i -D webpack-contrib/html-webpack-plugin or yarn add webpack-contrib/html-webpack-plugin -D

(Visited 1,669 times, 1 visits today)
Comments are closed.