如何在Webpack+TypeScript环境下处理Chrome扩展HTML中的script标签

问题说明 #

原JavaScript开发的Chrome扩展运行正常，迁移至TypeScript并配置Webpack、tsconfig后，扩展可加载但存在以下问题：

• src/scripts下所有.js已改为.ts文件
• HTML页面（如popup.html）仍引用原.js文件路径
• Webpack当前仅将.ts文件直接复制到dist/scripts，导致页面找不到对应的.js文件

解决方案步骤 #

1. 扩展Webpack入口，编译所有TS脚本

当前Webpack仅配置了background.ts作为入口，需将scripts目录下的所有TS文件加入入口，让Webpack编译生成对应的JS文件。

修改webpack/webpack.config.js的entry部分：

entry: {
  background: path.resolve(__dirname, '..', 'src', 'background.ts'),
  'scripts/popup': path.resolve(__dirname, '..', 'src', 'scripts', 'popup.ts'),
  'scripts/options': path.resolve(__dirname, '..', 'src', 'scripts', 'options.ts'),
  'scripts/devtools': path.resolve(__dirname, '..', 'src', 'scripts', 'devtools.ts'),
  'scripts/panel': path.resolve(__dirname, '..', 'src', 'scripts', 'panel.ts'),
},

2. 移除CopyPlugin对TS脚本的复制规则

原配置中CopyPlugin会直接复制src/scripts下的.ts文件到dist/scripts，这会干扰Webpack的编译输出，需删除该规则。

在webpack.config.js的CopyPlugin patterns中，删除以下片段：

{
  from: path.resolve(__dirname, '..', 'src', 'scripts'),
  to: path.resolve(__dirname, '..', 'dist', 'scripts'),
  context: 'public',
},

3. 修正tsconfig的输出配置

当前tsconfig.json的outDir与Webpack输出路径不一致，且TypeScript无需单独生成文件，交给Webpack处理即可：

修改tsconfig.json的compilerOptions：

{
  "compilerOptions": {
    // 保留原有其他配置...
    "outDir": "./dist",
    "noEmit": true, // 让TypeScript仅做类型检查，不生成文件
  }
}

4. 确认HTML脚本引用路径

检查HTML文件中的脚本引用，确保路径指向编译后的JS文件，例如popup.html中的：

<script async src="../scripts/popup.js"></script>

该路径与编译后dist/scripts/popup.js的位置匹配，无需修改。

5. 重新构建项目

执行构建命令：

npm run build

完成后dist/scripts目录下会生成所有对应的.js文件，HTML页面可正常加载脚本。

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