多模块集中式Webpack 3.x构建配置方案咨询

Hey there! I’ve tackled similar multi-module library setups before, so let’s walk through how to build a centralized Webpack config system that gives you a single maintenance entry point—while still letting individual modules have flexibility where they need it. This should also help resolve those maintenance disputes by setting clear guardrails.

Core Approach: Split & Merge Configs #

The key idea is to extract all shared Webpack settings into a base config file, then let each module extend that base with its own minimal, module-specific overrides. This keeps your core logic centralized and avoids duplicate code across modules.

1. Create a Shared Base Config #

First, set up a dedicated config directory at your project root to house the base setup. This will be the single source of truth for all common rules, loaders, and output defaults.

// config/webpack.base.js
const path = require('path');

module.exports = {
  module: {
    rules: [
      // Shared Babel setup for all modules
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      // Shared CSS loader (adjust based on your styling setup)
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // Add other shared loaders (assets, fonts, etc.) here
    ]
  },
  resolve: {
    extensions: ['.js', '.json'],
    modules: [path.resolve(__dirname, '../src'), 'node_modules']
  },
  // Default output settings optimized for npm modules
  output: {
    libraryTarget: 'umd', // Works with CommonJS, AMD, and global scope
    library: '[name]',
    filename: '[name].min.js'
  },
  devtool: 'source-map' // Consistent source maps across all modules
};

2. Extend Base Config for Each Module #

Each independent module will have its own small Webpack config that merges the base setup with module-specific details (like entry point, output path, or unique plugins). You’ll need webpack-merge for this—make sure to install a version compatible with Webpack 3.x (v4.x is the right pick, since newer versions don’t support Webpack 3):

npm install webpack-merge@4 --save-dev

Then, in each module’s directory, create a config file:

// modules/button/webpack.config.js
const merge = require('webpack-merge');
const baseConfig = require('../../config/webpack.base.js');
const path = require('path');

module.exports = merge(baseConfig, {
  entry: './src/index.js', // Module-specific entry point
  output: {
    path: path.resolve(__dirname, 'dist'), // Output to module's dist folder
    filename: 'my-ui-button.js' // Unique filename for the module
  },
  // Add any module-specific plugins or overrides here (e.g., minification tweaks)
});

3. Centralize Build Commands #

To make running builds easy for your team, add scripts to your root package.json that trigger builds for individual modules or all modules at once:

{
  "scripts": {
    "build:button": "webpack --config modules/button/webpack.config.js",
    "build:input": "webpack --config modules/input/webpack.config.js",
    "build:all": "npm run build:button && npm run build:input",
    "dev:button": "webpack --watch --config modules/button/webpack.config.js"
  }
}

4. Resolve Maintenance Disputes #

Now, to keep everyone aligned on how to maintain this system:

• Lock down base config changes: Require pull request reviews for any modifications to webpack.base.js—this ensures core changes don’t break all modules unexpectedly.
• Document the rules: Write a config/README.md that explains what settings live in the base config (e.g., loaders, resolve rules) and what can be overridden per module (e.g., entry, output filename).
• Enforce consistency: Use a linter for your Webpack configs (like eslint-plugin-webpack) to catch deviations from your agreed-upon standards.

Quick Webpack 3.x Notes #

• Make sure all your Webpack-related dependencies (like babel-loader, css-loader) are versions compatible with Webpack 3.x—check their docs if you run into errors.
• If you need to add environment-specific configs (dev vs prod), you can create webpack.dev.js and webpack.prod.js in the config directory, then merge those with the base config alongside module-specific settings.

内容的提问来源于stack exchange，提问作者Rudi Ørnhøj