tools.webpackChain#

• 类型： Function | undefined
• 默认值： undefined
• 打包工具： 仅支持 webpack

你可以通过 tools.webpackChain 来修改默认的 webpack 配置，它的值为 Function 类型，接收两个参数：

• 第一个参数为 webpack-chain 对象实例，你可以通过这个实例来修改默认的 webpack 配置。
• 第二个参数为一个工具集合，包括env、isProd、CHAIN_ID 等。

相比于 tools.webpack，webpack-chain 不仅支持链式调用，而且能够基于别名来定位到内置的 Rule 或 Plugin，从而实现精准的配置修改。我们推荐使用 tools.webpackChain 来代替 tools.webpack。

tools.webpackChain 的执行时机早于 tools.webpack，因此会被 tools.webpack 中的修改所覆盖。

工具集合#

env#

• 类型： 'development' | 'production' | 'test'

通过 env 参数可以判断当前环境为 development、production 还是 test。比如：

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

isProd#

• 类型： boolean

通过 isProd 参数可以判断当前环境是否为 production。比如：

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

target#

• 类型： 'web' | 'node' | 'modern-web' | 'web-worker'

通过 target 参数可以判断当前构建的目标运行时环境。比如：

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

isServer#

• 类型： boolean

判断当前构建的目标运行时环境是否为 node，等价于 target === 'node'。

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

isWebWorker#

• 类型： boolean

判断当前构建的目标运行时环境是否为 web-worker，等价于 target === 'web-worker'。

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

webpack#

• 类型： typeof import('webpack')

通过这个参数你可以拿到 webpack 实例。比如：

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

HtmlWebpackPlugin#

• 类型： typeof import('html-webpack-plugin')

通过这个参数你可以拿到 HtmlWebpackPlugin 实例。

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

getCompiledPath#

• 类型： (name: string) => string

获取 builder 内置依赖的所在路径，例如：

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

该方法通常在需要与 builder 复用同一份依赖时会被用到。

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

CHAIN_ID#

Builder 中预先定义了一些常用的 Chain ID，你可以通过这些 ID 来定位到内置的 Rule 或 Plugin。

CHAIN_ID.RULE#

CHAIN_ID.ONE_OF#

通过 ONE_OF.XXX 可以匹配到规则数组中的某一类规则。

CHAIN_ID.USE#

通过 USE.XXX 可以匹配到对应的 loader。

CHAIN_ID.PLUGIN#

通过 PLUGIN.XXX 可以匹配到对应的 plugin。

CHAIN_ID.MINIMIZER#

通过 MINIMIZER.XXX 可以匹配到对应的压缩工具。

使用示例#

使用示例可参考：WebpackChain 使用示例。