alarm-component/config/webpack.prod.config.js

const path = require("path");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.js"); // 引用公共的配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 用于将组件的css打包成单独的文件输出到`lib`目录中
const webpack = require("webpack");

const prodConfig = {
  mode: "production", // 开发模式
  entry: path.join(__dirname, "../src/entry.jsx"),
  output: {
    path: path.join(__dirname, "../lib/"),
    filename: "index.js",
    libraryTarget: "umd", // 采用通用模块定义
    libraryExport: "default", // 兼容 ES6 的模块系统、CommonJS 和 AMD 模块规范
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: [MiniCssExtractPlugin.loader, "css-loader?modules"],
      },
      {
        test: /\.min\.css$/,
        loader: ["style-loader", "css-loader"],
      },
      {
        test: /(\.module)?.(sass|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[path][name]__[local]--[hash:base64:5]",
              },
              sourceMap: true,
            },
          },
          "sass-loader",
        ],
      },
      // {
      //     test: /\.less$/,
      //     use: [
      //         'style-loader',
      //         {
      //             loader: 'css-loader',
      //             options: {
      //                 modules: {
      //                     localIdentName: '[path][name]__[local]--[hash:base64:5]',
      //                 },
      //                 sourceMap: true,
      //             },
      //         },
      //         'less-loader',
      //     ],
      // },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true, // 确保启用了 CSS Modules
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "main.min.css", // 提取后的css的文件名
    }),
    new webpack.ProvidePlugin({
      React: "react",
    }),
  ],
  externals: {
    // 定义外部依赖，避免把react和react-dom打包进去
    react: {
      root: "React",
      commonjs2: "react",
      commonjs: "react",
      amd: "react",
    },
    "react-dom": {
      root: "ReactDOM",
      commonjs2: "react-dom",
      commonjs: "react-dom",
      amd: "react-dom",
    },
  },
};

module.exports = merge(prodConfig, baseConfig); // 将baseConfig和prodConfig合并为一个配置