Upgrade Webpack and related dependencies to v4.1.0

[julienben]

Update Log

I did this for my own project so I thought I would make sure my work can benefit a project that has helped me a lot.

The upgrade process's main step was setting Webpack 4's mode appropriately. This triggers per-env defaults which match perfectly with the phased-out plugins I removed from the configs.

Webpack 4 isn't very well documented yet. The best article I found is webpack 4: mode and optimization.

🗒️ Notes

1. Because Webpack now loads JSON by default, I had to change the way we use Webpack to transfer manifest.json to the build folder. It looks a bit weird (import '!file-loader?name=[name].json!./manifest.notjson') so alternatives are welcome.
2. I ran the full regression testing (and updated the steps in the docs since it hadn't been done for react-router 4).
3. I had to add a linting exception for injectReducer.js and injectSaga.js. Not sure why eslint was seeing static methods from a class as undefined.
4. options.optimization was added mostly for easier customization in the future. What you see in the optimization part of the configs doesn't differ from the new Webpack defaults (per environment).
5. I had to temporarily disable the minification of the service worker JS. It uses UglifyJS, which Webpack 4 wasn't ok with. (cf. this issue.)
6. The demo app's main.[hash].js has dropped from 586KB to 493KB.

Tooling Versions

• Node 8.9.3
• npm 5.6.0
• yarn 1.5.1
• Mac OS 10.13.2
• Chrome 64.0.3282.186 (64-bit)

📦 Version Diff

[0] PATCH UPDATES

 babel-loader                            7.1.0  →    7.1.3
 css-loader                             0.28.4  →  0.28.10

[1] MINOR UPDATES

 add-asset-html-webpack-plugin           2.0.1  →    2.1.3
 exports-loader                          0.6.4  →    0.7.0
 html-loader                             0.4.5  →    0.5.5
 imports-loader                          0.7.1  →    0.8.0
 offline-plugin                          4.8.1  →    4.9.0
 style-loader                           0.18.1  →   0.20.2
 webpack-hot-middleware                 2.18.0  →   2.21.2

[3] MAJOR UPDATES

 file-loader                            0.11.1  →   1.1.11
 html-webpack-plugin                    2.29.0  →    3.0.4
 image-webpack-loader                    2.0.0  →    4.1.0
 url-loader                              0.5.8  →    1.0.1
 webpack                                 3.5.5  →    4.1.0
 webpack-dev-middleware                 1.11.0  →    3.0.0

[4] NEW DEPENDENCIES

 webpack-cli                                      2.0.10

Errors Encountered

Warnings: Observed on yarn install after removing lockfile and node_modules

I believe all of these warnings were already there before this PR, except for the webpack-cli ones of course.

• warning enzyme > rst-selector-parser > nearley > nomnom@1.6.2: Package no longer supported. Contact support@npmjs.com for more info.
• warning image-webpack-loader > imagemin-webp > cwebp-bin > bin-build > download > gulp-decompress > gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
• warning webpack-cli > jscodeshift > nomnom@1.8.1: Package no longer supported. Contact support@npmjs.com for more info.
• warning webpack-cli > jscodeshift > babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
• warning "stylelint > postcss-html@0.11.0" has unmet peer dependency "postcss-sass@>=0.2.0".
• warning "stylelint-processor-styled-components > typescript-eslint-parser@9.0.1" has unmet peer dependency "typescript@*".

[coveralls]

Coverage increased (+0.4%) to 100.0% when pulling c9f2241 on julienben:webpack-v4 into b0bd976 on react-boilerplate:dev.

[gretzky]

Thank you @julienben !!!!!

[DJTB]

I've used this and it works great with this PR / webpack 4.1
https://github.com/arthurbergmz/webpack-pwa-manifest

And you can strip these lines from app entry point:

import '!file-loader?name=[name].[ext]!./favicon.png';
import '!file-loader?name=[name].json!./manifest.json';

[julienben]

@DJTB The favicon too? How will it be included in the build without this line?

@gretzky I just saw that I have a typo but I don't think it's worth opening a PR just for this. Could you fix it super quick?

It's just that I wrote manifest.notjson instead of the real file name manifest.notajson in internals/templates/app.js. It's spelled correctly in app/app.js.

[MariusRumpf]

@julienben Isn't manifest.webmanifest the recommended way to name the web manifest file anyway? See W3C

[julienben]

Hadn't heard of this before but the create-react-app team had the same conversation and stuck to manifest.json. Seems like the only thing that matters is providing a valid href to <link rel="manifest">. My personal thought is to also keep the JSON extension, if only because IDEs won't recognize .webmanifest as JSON without extra configuration.

[csantiago132]

@julienben the fix for the image loader is to change the options to this {cc @gretzky}

{
  test: /\.(jpg|png|gif|svg|ico)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'assets/images/[hash].[ext]',
      },
    },
    {
      loader: 'image-webpack-loader',
      // change to this, its that the way options are passed changed to this.
      // options are examples btw
      query: {
        mozjpeg: {
          progressive: true,
        },
        gifsicle: {
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        pngquant: {
          quality: '65-90',
          speed: 4,
        },
      },
    },
  ],
},

I've never done a contrib so im a little lost and dont want to waste anyone's time by me doing it wrong :/

[DJTB]

@julienben the pwa plugin also generates icons from a base large png (not the favicon .ico which still needs to be file-loader in index.html) although that appears to be on their roadmap.

 new WebpackPwaManifest({
      filename: 'manifest.json',
      /* rest of manifest */
      icons: [
        {
          src: path.resolve('app/icon-512x512.png'),
          sizes: [36, 48, 72, 96, 144, 192, 512],
        },
      ],
    }),

Creates fingerprinted icons into build folder & manifest with:

  "icons": [
    {
      "src": "/icon_512x512.5dfde1a23ecc178105ff10a89a6a7914.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icon_192x192.4e6d287ac169165135774f1d4d3137cc.png",
      "sizes": "192x192",
      "type": "image/png"
    },
/* etc */

[DJTB]

Also worth noting that during my upgrade I had to lock image-webpack-loader at 3.6 because 4.0/4.1 errors on Ubuntu 16.04. (Unrelated to the pwa plugin).
tcoopman/image-webpack-loader#142

[jacobfunch]

Am I the only one experiencing a problem with webpack and shebang based on the current repository and your changes for webpack 4?

Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
|
| /*
 @ dll reactBoilerplateDeps```

[JohnMostlyR]

After this merge I am having problems with Webpack when running in development mode:

manifest.json:1 Manifest: Line: 1, column: 1, Unexpected token.
reactBoilerplateDeps.dll.js:1 Uncaught SyntaxError: Unexpected token <
main.js:1 Uncaught SyntaxError: Unexpected token <

Microsoft Windows [Version 10.0.16299.309]

Going back to before this merge all is fine.
Quite puzzled as to why I seem to be the only one having this issue?

There are no problems with the production build.

Any suggestions?

I found the problem. It is related to webpack/webpack-dev-middleware#276
Upgrading webpack-dev-middleware to version 3.0.1 solved it.

I will prepare a pull request.

[csantiago132]

@Mensae you still have json-loader installed? that (most likely) be the problem

[JohnMostlyR]

@csantiago132 Thanks for thinking with me. I found the problem, see my edited comment. At least it solves it for me.

[csantiago132]

@Mensae ok sorry I think I didnt see it (or was edited after I posted)

[JohnMostlyR]

@csantiago132 Sorry, it was me :-) I saw your comment after I sent it.
I pused the fix: #2161

[julienben]

I just opened a new PR addressing (hopefully) everything that was discussed here.

Check it out here.

• The PWA manifest.json is now generated by the webpack-pwa-manifest plugin. I updated the documentation accordingly and also upgraded some dependencies.
• I had to disable JPEG optimization in image-webpack-loader as it was breaking the build in Travis CI (no matter the version). I left a comment explaining how to enable it easily.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.