使用webpack-dev-server时MSW初始化应选择哪个public目录？

推荐选择方案1，或使用独立public目录（最优解） #

为什么排除方案2 #

• ./dist是编译输出目录，默认被.gitignore忽略，不会提交到仓库，每次清空重建后都需要重新执行npx msw init生成worker文件，团队协作时所有成员都要单独执行初始化操作，维护成本极高，直接排除。

方案1的优化调整（如果直接使用src目录） #

你现有配置下方案1可正常运行，但更建议调整webpack配置，让构建流程自动处理worker文件的拷贝，避免后续业务迭代出现异常：

1. 安装copy-webpack-plugin依赖：

npm install copy-webpack-plugin --save-dev

2. 修改webpack.config.js，新增插件配置，把mockServiceWorker.js拷贝到构建输出根目录：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = {
  // 其他原有配置不变
  plugins: [
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
    // 新增拷贝规则
    new CopyWebpackPlugin({
      patterns: [{ from: path.resolve(__dirname, "src/mockServiceWorker.js"), to: "./" }]
    })
  ],
};

更规范的最优方案：新增独立public目录 #

符合官方文档对public目录的定义，也避免非业务代码混入src目录：

1. 项目根目录新建public文件夹，将其加入Git提交范围
2. 执行npx msw init ./public生成worker文件，同步修改package.json配置：

"msw": {
  "workerDirectory": "public"
}

3. 修改webpack配置：

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");

module.exports = {
  // 其他原有配置不变
  plugins: [
    new HtmlWebpackPlugin({ template: "./src/index.html" }),
    // 拷贝public下所有静态资源到构建输出根目录
    new CopyWebpackPlugin({
      patterns: [{ from: path.resolve(__dirname, "public"), to: "./" }]
    })
  ],
  devServer: {
    static: [
      { directory: path.join(__dirname, "dist") },
      // 新增public作为静态资源目录，开发环境可直接访问
      { directory: path.join(__dirname, "public") }
    ],
    port: 9000,
  },
};

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