InboxSDK示例项目执行npm build后manifest.json还原，如何修改Webpack配置？

1. 为什么修改dist/manifest.json会被还原？ #

dist目录是Webpack的构建产物目录，所有文件都是从src等源目录生成的。每次执行npm run build时，Webpack会重新根据源文件生成整个dist目录，直接修改dist里的文件相当于修改临时产物，必然会被覆盖。

正确做法是：修改项目根目录下src文件夹里的manifest源文件（一般是src/manifest.json），修改后再执行npm run build，dist里的manifest.json就会同步更新为你修改的版本。

2. 修改Webpack配置让dist仅包含修改后的manifest.json #

打开项目的webpack.config.js，按以下步骤调整：

步骤1：移除不必要的入口文件 #

找到entry配置项，默认会指向src/content.js或类似业务脚本，直接注释/删除这部分，避免Webpack生成额外的bundle文件：

// 注释或删除默认entry
// entry: './src/content.js',

步骤2：保留仅复制manifest的规则 #

找到CopyWebpackPlugin的配置（项目用来复制静态资源到dist的插件），只保留复制src/manifest.json的规则，删除其他复制图标、额外脚本的规则：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'src/manifest.json', to: '.' },
        // 删除这里的其他patterns，比如复制图标、css的规则
      ],
    }),
    // 移除HtmlWebpackPlugin等其他生成额外文件的插件
  ],
};

步骤3：确保dist目录每次构建清空 #

在output配置里添加clean: true，保证每次build时清空旧的dist文件，只保留新生成的内容：

output: {
  path: __dirname + '/dist',
  clean: true,
  // 若已删除entry，filename配置可注释或删除
  // filename: 'content.js',
},

补充理解 #

• Webpack的核心逻辑是从源文件生成构建产物，永远不要直接修改dist内的文件，所有修改都要在src等源目录完成。
• 对于Chrome扩展来说，manifest.json是核心配置文件，通过CopyWebpackPlugin将源manifest复制到dist是标准的配置方式。
• 如果需要动态修改manifest（比如根据环境切换配置），可以在build前添加Node脚本修改src/manifest.json，但新手阶段直接修改静态manifest文件即可满足需求。

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