webpack-chain配置

webpack-chain需要 Node.js 12 或更高版本。webpack-chain也只创建设计用于 webpack 4 的配置对象。

你可以使用 Yarn 或 npm 安装这个包（选择一个）：

npm install --save-dev webpack-chain

安装完成后，您webpack-chain可以开始创建 webpack 配置。对于本指南，我们的示例基本配置将webpack.config.js位于项目目录的根目录中。

// Require the webpack-chain module. This module exports a single
// constructor function for creating a configuration API.
const Config = require('webpack-chain');

// Instantiate the configuration with a new API
const config = new Config();

// Make configuration changes using the chain API.
// Every API call tracks a change to the stored configuration.

config
  // Interact with entry points
  .entry('index')
    .add('src/index.js')
    .end()
  // Modify output settings
  .output
    .path('dist')
    .filename('[name].bundle.js');

// Create named rules which can be modified later
config.module
  .rule('lint')
    .test(/\.js$/)
    .pre()
    .include
      .add('src')
      .end()
    // Even create named uses (loaders)
    .use('eslint')
      .loader('eslint-loader')
      .options({
        rules: {
          semi: 'off'
        }
      });

config.module
  .rule('compile')
    .test(/\.js$/)
    .include
      .add('src')
      .add('test')
      .end()
    .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', { modules: false }]
        ]
      });

// Create named plugins too!
config
  .plugin('clean')
    .use(CleanPlugin, [['dist'], { root: '/dir' }]);

// Export the completed configuration object to be consumed by webpack
module.exports = config.toConfig();

使用 和 的实例时ChainedMap，ChainedSet您可以使用 执行条件配置when。您必须指定一个表达式 when()，将对其进行真假评估。如果表达式为真，第一个函数参数将使用当前链接实例的实例调用。您可以选择在条件为假时提供要调用的第二个函数，该函数也给出了当前链接的实例。

// Example: Only add minify plugin during production,
// otherwise set devtool to source-map
config
  .when(process.env.NODE_ENV === 'production',
    config => config.plugin('minify').use(BabiliWebpackPlugin),
    config => config.devtool('source-map')
  );

具体详情链接

这篇好文章是转载于：学新通技术网