从Webpack迁移到Brunch：配置文件适配方案咨询

Hey there! Let's get your Brunch setup matching your existing Webpack multi-app configuration with a shared commons chunk. I'll break this down step by step so you can replicate that exact behavior.

Step 1: Install Required Brunch Plugins #

First, you'll need a few plugins to handle multi-entry points and shared code extraction. Run this in your project root:

npm install --save-dev brunch babel-brunch commons-chunk-brunch uglify-js-brunch

• brunch: Core Brunch tooling
• babel-brunch: (Optional but recommended) Transpiles ES6+ code
• commons-chunk-brunch: Extracts shared dependencies into a commons chunk
• uglify-js-brunch: Minifies code for production

Step 2: Create Your brunch-config.js #

This is where the magic happens. We'll configure entry points, output paths, and shared code extraction to mirror your Webpack setup.

Here's the full configuration file:

module.exports = {
  // Define paths Brunch should watch and output to
  paths: {
    watched: ['src/js'], // Watch all app directories under src/js
    public: 'dist', // Output built files to a dist folder (like Webpack)
    // Add each app's local node_modules to Brunch's module search path
    modules: [
      'node_modules',
      'src/js/app1/node_modules',
      'src/js/app2/node_modules',
      'src/js/app3/node_modules',
      'src/js/app4/node_modules'
    ]
  },

  // Configure JavaScript entry points and output bundling
  files: {
    javascripts: {
      // Explicitly list each app's entry file (matches Webpack's entry array)
      entries: [
        'src/js/app1/src/index.js',
        'src/js/app2/src/index.js',
        'src/js/app3/src/index.js',
        'src/js/app4/src/index.js'
      ],
      // Map entry files to their output bundles
      joinTo: {
        'js/app1.js': /src\/js\/app1/, // Bundle app1's code into app1.js
        'js/app2.js': /src\/js\/app2/,
        'js/app3.js': /src\/js\/app3/,
        'js/app4.js': /src\/js\/app4/,
        // Extract shared dependencies (node_modules + cross-app code) into commons.js
        'js/commons.js': /node_modules/
      }
    }
  },

  // Configure plugins for shared code and transpilation
  plugins: {
    // Extract modules used by 2+ apps into commons.js
    commonsChunk: {
      name: 'js/commons.js',
      minChunks: 2 // Only extract modules referenced by at least 2 entry points
    },
    // Optional: Configure Babel if you're using ES6+ features
    babel: {
      presets: ['@babel/preset-env']
    }
  },

  // Production optimization settings
  optimize: {
    minify: true, // Minify code in production
    sourceMaps: false // Disable source maps for smaller bundles (adjust as needed)
  }
};

Step 3: Key Configuration Explanations #

Let's break down the critical parts to make sure you understand how this matches your Webpack setup:

• Multi-entry Points: The entries array lists each app's index.js just like Webpack's entry object. The joinTo section maps each app's code to its own output bundle (e.g., app1.js).
• Shared Commons Chunk: The commons-chunk-brunch plugin works like Webpack's splitChunks—it pulls modules used by multiple apps (and all node_modules dependencies, if you keep the /node_modules/ regex) into commons.js. The minChunks: 2 ensures only truly shared code gets extracted, avoiding bloat.
• Local App Node Modules: The paths.modules array includes each app's local node_modules folder, so Brunch can resolve dependencies specific to each app.

Step 4: Run Brunch #

• Development Mode: Start a watch server with hot reloading (similar to Webpack Dev Server):

  npx brunch watch --server
  

• Production Build: Generate optimized, minified bundles:

  npx brunch build --production
  

This setup will output exactly what you had with Webpack: four app-specific bundles (app1.js to app4.js) and a single commons.js with all shared dependencies.

内容的提问来源于stack exchange，提问作者Johannes