Restructure webpack configuration

[flut1]

important: this PR should only change the structure of the configuration, the contents of the config should stay the same for now.

Motivation

I've noticed before that our webpack configuration can be somewhat hard to navigate. I wanted to start working on #57, but I'm afraid that making changes in our current webpack config setup will further complicate things. That's why I would like to introduce this change first. Here are some of the problems I am trying to solve:

• When looking for a specific config, it is unclear beforehand if you need to look in webpack.base.conf, webpack.dev.conf or webpack.prod.conf.
• There is inconsistency on how we did development vs. production config. Sometimes config objects are split between webpack.dev.conf and webpack.prod.conf, sometimes they are in webpack.base.conf and switched using an isDevelopment flag.
• Having the same piece config separated into multiple files (dev and prod) makes it easier to introduce unintentional differences between the two and introduce prod-only bugs.
• Config often referred to helper functions in another file (for example, webpackHelpers). This made it difficult to debug configuration issues because you had to keep clicking back and forth between different modules.

Changes

File structure

The file structure has changed to make it clear where to look when looking for a specific piece of config:

• webpack.conf.dev.js and webpack.conf.prod.js now only serve as entry files. They do not contain configuration
• webpack.conf.base.js only contains top-level configuration properties (mode and devtool)
• all other configuration has been split into the top-level objects of a webpack config file to webpack.partial.conf.<prop>.js
• filenames have been changed to start with webpack.conf instead of ending in .conf. This will make sure that all the webpack.partial.conf files are next to each other when sorted alphabetically.

Use of helper functions

All helper functions (mostly for loaders) have been moved to be inline at the location where they are used. This will make sure all the configuration related to a single property is next to each other (as opposed to split among different modules). For example:

{
  test: /\.svg$/,
  oneOf: (() => {
    const svgoLoaderConfig = {
      loader: 'svgo-loader',
      options: {
        plugins: [
          { removeStyleElement: true },
          { removeComments: true },
          { removeDesc: true },
          { removeUselessDefs: true },
          { removeTitle: true },
          { removeMetadata: true },
          { removeComments: true },
          { cleanupIDs: { remove: true, prefix: '' } },
          { convertColors: { shorthex: false } },
        ],
      },
    };

    return [
      {
        resourceQuery: /inline/,
        use: [{ loader: 'svg-inline-loader' }, svgoLoaderConfig],
      },
      {
        use: [{ loader: 'url-loader' }, svgoLoaderConfig],
      },
    ];
  })(),
},

An iife ((() => { ... })()) is used here instead of a getSvgoLoaderConfig() at the top of the file. This is to ensure that all the config related to .svg is together.

Small things

• A small number of conf options have been removed that are already automatically set by webpack when using the 'mode' property.
• Comment blocks have been added in several places to create a visual separation in long configuration files (see webpack.partial.conf.module.js)

[ThaNarie]

I think I like the change :)

[jesse-mm]

Nice work and I like the approach of separation for the configuration options of webpack. 👍