揭开 webpack-chain 神秘面纱，探索 loader、plugin 核心奥秘

2024-01-02 16:26:09

在 webpack 生态系统中，webpack-chain 扮演着至关重要的角色，它提供了一个清晰、简洁且富有表现力的 API，使开发者能够轻松地配置 webpack 的构建过程。它摒弃了冗长的 JavaScript 对象配置方式，转而采用链式语法，不仅提高了可读性，而且增强了可维护性。

在本文中，我们将深入剖析 webpack-chain，并通过 loader 和 plugin 的简单实现，让您对 webpack 的核心机制有了深入的了解。掌握了这些知识，您将能够灵活配置项目，完善定制化解决方案，搭建可插拔的开发环境和生产环境，真正发挥 webpack 的强大功能。

webpack-chain 的基本配置

webpack.config.js

const { Chain } = require('webpack-chain');

module.exports = new Chain()
  .mode('development')
  .entry('main')
    .add('./src/main.js')
  .end()
  .output
    .path(__dirname + '/dist')
    .filename('[name].js');

共享配置也很简单。仅仅导出配置和在传递给 webpack 时引用它即可。

const config = new Chain()
  .mode('development')
  .entry('main')
    .add('./src/main.js')
  .end()
  .output
    .path(__dirname + '/dist')
    .filename('[name].js');

module.exports = (env, argv) => {
  config.merge({
    devtool: argv.mode === 'production' ? false : 'source-map'
  })

  return config.toConfig();
};

webpack-chain 中的 loader 和 plugin

webpack-chain 提供了丰富的 API 来操作 loader 和 plugin。通过它们，您可以轻松地添加、修改和删除 loader 和 plugin，以满足您的项目需求。

添加 loader

config.module
  .rule('rule')
    .test(/\.js$/)
    .use('loader')
      .loader('babel-loader')
      .end();

修改 loader

config.module
  .rule('rule')
    .use('loader')
      .tap(options => {
        // 修改 loader 的选项
        options.presets = ['@babel/preset-env', '@babel/preset-react'];
        return options;
      });

删除 loader

config.module
  .rule('rule')
    .use('loader')
      .delete();

添加 plugin

config
  .plugin('plugin')
    .use(SomePlugin);

修改 plugin

config
  .plugin('plugin')
    .tap(options => {
      // 修改 plugin 的选项
      options.someOption = true;
      return options;
    });

删除 plugin

config
  .plugin('plugin')
    .delete();

loader 和 plugin 的简单实现

为了让您对 loader 和 plugin 有更深入的了解，我们这里提供两个简单的实现。

loader

class MyLoader {
  apply(compiler) {
    compiler.hooks.compilation.tap('MyLoader', compilation => {
      compilation.hooks.normalModuleLoader.tap('MyLoader', (context, module) => {
        // 这里可以对模块进行一些处理
      });
    });
  }
}

plugin

class MyPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync('MyPlugin', (compilation, callback) => {
      // 这里可以对构建产物进行一些处理
      callback();
    });
  }
}