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

const path = require("path");
const merge = require("webpack-merge");
const baseConfig = require("./webpack.base.js"); // 引用公共配置
const webpack = require("webpack");

const devConfig = {
  mode: "development", // 开发模式
  entry: path.join(__dirname, "../src/index.jsx"), // 项目入口，处理资源文件的依赖关系
  output: {
    path: path.join(__dirname, "../example/src/"),
    filename: "bundle.js", // 使用webpack-dev-sevrer启动开发服务时，并不会实际在`src`目录下生成bundle.js，打包好的文件是在内存中的，但并不影响我们使用。
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        exclude: /\.min\.css$/,
        loader: ["style-loader", "css-loader?modules"],
      },
      // {
      //     test: /\.s[ac]ss$/i,
      //     use: ['style-loader','css-loader','sass-loader'],
      // },
      {
        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: true, // 确保启用了 CSS Modules
            },
          },
          "less-loader",
        ],
      },
      // {
      //     // 匹配 icon 文件
      //     test: /\.(icon|ttf|bin|eot|woff|woff2|svg)$/,
      //     // 使用那些 loader 进行处理
      //     loader: 'url-loader'
      // },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"],
      },
      // {
      //     test: /\.svg$/,
      //     use:{
      //         loader: "svg-sprite-loader",
      //         include: path.resolve(__dirname,'../src/components/Icons'),
      //         options:{
      //             symbolId: "icon-[name]"
      //         }
      //     },
      //     // include: path.iconsPath,
      //     // options: {
      //     //     symbolId: "icon-[name]"
      //     // }
      // },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, "../example/src/"),
    compress: true,
    host: "127.0.0.1", // webpack-dev-server启动时要指定ip，不能直接通过localhost启动，不指定会报错
    port: 3001, // 启动端口为 3001 的服务
    open: true, // 自动打开浏览器
  },
  plugins: [
    new webpack.ProvidePlugin({
      React: "react",
    }),
  ],
};
module.exports = merge(devConfig, baseConfig); // 将baseConfig和devConfig合并为一个配置