如何通过Webpack基于多份main.scss文件生成多套独立输出目录（适配Vue/React项目）

Got it, let's work through this problem together. You're looking to build two themed versions of your Vue project—same JS code, different SCSS color schemes—with the output structured into dist/publicA and dist/publicB each containing their own css and js directories. Here's a solid, actionable solution:

Step 1: Adjust Your Entry & Style Import Logic #

First, we need to separate the theme-specific style imports while keeping the core JS code identical. You have two straightforward options here:

Option A: Create Theme-Specific Entry Files

Make two entry files in your src directory that import the core JS logic plus their respective theme styles:

• src/main-publicA.js:

  import "../resources/scss/publicA/scss/main.scss";
  import "./core.js"; // We'll move your original main.js logic here
  

• src/main-publicB.js:

  import "../resources/scss/publicB/scss/main.scss";
  import "./core.js";
  

• Then move all your original main.js code (Vue initialization, App import, etc.) into src/core.js to avoid duplicate code.

Option B: Use Environment Variables in a Single Entry

Keep your original main.js but use a theme variable to conditionally import styles:

// src/main.js
if (process.env.THEME === "publicA") {
  import "../resources/scss/publicA/scss/main.scss";
} else {
  import "../resources/scss/publicB/scss/main.scss";
}

// Rest of your original code (Vue import, App setup, etc.) stays here

Step 2: Update Webpack Config for Multi-Theme Build #

We'll configure Webpack to build both themes in parallel by exporting an array of configuration objects. Here's the full adjusted config:

const path = require('path');
const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// Reusable config factory for each theme
const createThemeConfig = (theme) => ({
  mode: "development",
  devtool: 'source-map',
  // Use Option A entry if you made theme-specific files; use Option B entry if using env vars
  entry: `./src/main-${theme}.js`, // For Option A
  // entry: './src/main.js', // For Option B
  output: {
    path: path.resolve(__dirname, `dist/${theme}`),
    filename: `js/[name].min.js`
  },
  module: {
    rules: [
      { test: /\.vue$/, loader: 'vue-loader' },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: { sourceMap: true }
        }]
      },
      {
        test: /\.(css|scss|sass)$/,
        use: [
          // Use MiniCssExtractPlugin for production, style-loader for dev hot-reload
          process.env.NODE_ENV === 'production' 
            ? MiniCssExtractPlugin.loader 
            : 'style-loader',
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      },
    ]
  },
  resolve: {
    alias: { 'vue$': 'vue/dist/vue.esm.js' },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({ filename: `css/[name].min.css` }),
    // Only needed for Option B: inject theme environment variable
    new webpack.DefinePlugin({
      'process.env.THEME': JSON.stringify(theme)
    })
  ]
});

// Export both theme configs - Webpack will build them in parallel
module.exports = [createThemeConfig('publicA'), createThemeConfig('publicB')];

Step 3: Key Notes & Optimizations #

• Avoid Duplicate JS: If you go with Option A, moving core JS to src/core.js ensures you don't have redundant code in your entry files.
• Style Loader vs Extract Plugin: The config uses style-loader for development (enables hot reloading) and MiniCssExtractPlugin for production (extracts CSS to files). Adjust this based on your needs.
• Path Validation: Double-check your SCSS import paths match your project structure (../resources/scss/publicA/scss/main.scss should point correctly to your theme's main SCSS file).
• Production Builds: For production, set mode: "production" in the config and run your build command as usual—Webpack will minify assets automatically.

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