What you don’t know about Webpack- Multiple configuration methods

In addition to the most common way to describe the configuration required for Webpack by exporting an Object, there are more flexible ways to simplify configuration for different scenarios. Here are some of them.

Exporting a Function

Most of the time you will need to build multiple copies of the same source code, such as one for development and one for distribution online.

If you export an Object to describe the configuration required for Webpack, you need to write several files. One for the development environment and one for the online environment. Specify which configuration file to use at startup via webpack –config webpack.config.js.

By exporting a Function, you can flexibly control the configuration through JavaScript, and only need to write a configuration file to complete the above requirements.

Export a Function as follows:

const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

module.exports = function (env = {}, argv) {
  const plugins = [];

  const isProduction = env['production'];

  // Compress in build environment
  if (isProduction) {
    plugins.push(
      // Compress the output JS code
      new UglifyJsPlugin()
    )
  }

  return {
    plugins: plugins,
    // The Source Map is not printed in the build environment
    devtool: isProduction ? undefined : 'source-map'}; }Copy the code

When you run Webpack, you pass two arguments to this function:

1. env: WebPack-specific environment variable of the current runtime,envIs an Object. Read directly to the properties of Object, which need to be set with parameters when starting Webpack. For example, the start command iswebpack --env.production --env.bao=fooWhen,envThe value is{"production":"true","bao":"foo"}.
2. argv: represents all arguments passed through the command line when Webpack is started, for example--config,--env,--devtool, can be accessed throughwebpack -hLists all command line arguments supported by Webpack.

For the configuration files above, execute webpack at development time to build code that is easy to debug, and execute webpack –env.production to build compressed code when you need to build code that is published online.

This example provides the complete code for the project

Export a function that returns a Promise

In some cases you cannot return an Object describing the configuration synchronously. Webpack also supports exporting a function that returns a Promise, as follows:

module.exports = function(env = {}, argv) {
  return new Promise((resolve, reject) = > {
    setTimeout((a)= > {
      resolve({
        // ...})},5000)})}Copy the code

Export multiple configurations

In addition to exporting just one configuration, Webpack also supports exporting an array that can contain each configuration, and each configuration is built once.

Note that this feature has only been supported since Webpack 3.1.0.

Use as follows:

module.exports = [
  // Use a configuration described by Object
  {
    // ...
  },
  // Take a configuration described by the function
  function() {
    return {
      // ...}},// a configuration that takes the asynchronous function description
  function() {
    return Promise();
  }
]
Copy the code

The above configuration causes Webpack to perform three different builds for the three configurations.

This is particularly useful for building a library with Webpack that will be uploaded to the Npm repository, since the library may need to contain code in multiple modular formats, such as CommonJS, UMD, etc.