tools.webpackChain#

• Type: Function | undefined
• Default: undefined
• Bundler: only support webpack

You can modify the webpack configuration by configuring tools.webpackChain which is type of Function. The function receives two parameters, the first is the original webpack chain object, and the second is an object containing some utils.

Compared with tools.webpack, webpack-chain not only supports chained calls, but also can locate built-in Rule or Plugin based on aliases, so as to achieve precise config modification. We recommend using tools.webpackChain instead of tools.webpack.

tools.webpackChain is executed earlier than tools.webpack and thus will be overridden by changes in tools.webpack.

Utils#

env#

• Type: 'development' | 'production' | 'test'

The env parameter can be used to determine whether the current environment is development, production or test. For example:

export default {
  tools: {
    webpackChain: (chain, { env }) => {
      if (env === 'development') {
        chain.devtool('cheap-module-eval-source-map');
      }
    },
  },
};

isProd#

• Type: boolean

The isProd parameter can be used to determine whether the current environment is production. For example:

export default {
  tools: {
    webpackChain: (chain, { isProd }) => {
      if (isProd) {
        chain.devtool('source-map');
      }
    },
  },
};

target#

• Type: 'web' | 'node' | 'modern-web' | 'web-worker'

The target parameter can be used to determine the current environment. For example:

export default {
  tools: {
    webpackChain: (chain, { target }) => {
      if (target === 'node') {
        // ...
      }
    },
  },
};

isServer#

• Type: boolean

Determines whether the target environment is node, equivalent to target === 'node'.

export default {
  tools: {
    webpackChain: (chain, { isServer }) => {
      if (isServer) {
        // ...
      }
    },
  },
};

isWebWorker#

• Type: boolean

Determines whether the target environment is web-worker, equivalent to target === 'web-worker'.

export default {
  tools: {
    webpackChain: (chain, { isWebWorker }) => {
      if (isWebWorker) {
        // ...
      }
    },
  },
};

webpack#

• Type: typeof import('webpack')

The webpack instance. For example:

export default {
  tools: {
    webpackChain: (chain, { webpack }) => {
      chain.plugin('my-progress').use(webpack.ProgressPlugin);
    },
  },
};

HtmlWebpackPlugin#

• Type: typeof import('html-webpack-plugin')

The HtmlWebpackPlugin instance:

export default {
  tools: {
    webpackChain: (chain, { HtmlWebpackPlugin }) => {
      console.log(HtmlWebpackPlugin);
    },
  },
};

getCompiledPath#

• Type: (name: string) => string

Get the path to the builder built-in dependencies, such as:

• sass
• sass-loader
• less
• less-loader
• css-loader
• ...

This method is usually used when you need to reuse the same dependency with the builder.

export default {
  tools: {
    webpackChain: (chain, { getCompiledPath }) => {
      const loaderPath = getCompiledPath('less-loader');
      // ...
    },
  },
};

CHAIN_ID#

Some common Chain IDs are predefined in the Builder, and you can use these IDs to locate the built-in Rule or Plugin.

CHAIN_ID.RULE#

CHAIN_ID.ONE_OF#

ONE_OF.XXX can match a certain type of rule in the rule array.

CHAIN_ID.USE#

USE.XXX can match a certain loader.

CHAIN_ID.PLUGIN#

PLUGIN.XXX can match a certain webpack plugin.

CHAIN_ID.MINIMIZER#

MINIMIZER.XXX can match a certain minimizer.

Examples#

For usage examples, please refer to: WebpackChain usage examples.