如何将index.html纳入Webpack打包？ScalaJS-Bundler如何复制index.html至指定目录？

嘿，我来帮你搞定这个问题！针对你提到的两个需求——将index.html纳入Webpack打包产物，以及让它在执行fastOptJS::webpack时自动复制到指定目录，这里有两种实用的实现方式：

方法一：通过SBT任务直接复制资源 #

既然你的index.html已经放在src/resources目录下，我们可以利用SBT的任务依赖机制，让复制操作和Webpack打包绑定在一起：

• 打开你的build.sbt，添加以下配置代码：

// 定义一个自定义任务，负责复制index.html到目标目录
val copyIndexHtml = taskKey[Unit]("Copies index.html to scalajs-bundler's main output directory")

copyIndexHtml := {
  // 定位源文件：src/resources下的index.html
  val sourceFile = (resourceDirectory in Compile).value / "index.html"
  // 定位目标目录：scalajs-bundler的main输出目录
  val targetDirectory = (webpack in (Compile, fastOptJS)).value.getParentFile / "main"
  // 执行复制操作
  IO.copyFile(sourceFile, targetDirectory / "index.html")
}

// 让Webpack任务依赖这个复制任务，确保执行webpack前先完成复制
(webpack in (Compile, fastOptJS)) := (webpack in (Compile, fastOptJS)).dependsOn(copyIndexHtml).value

配置完成后，每次你运行fastOptJS::webpack命令，SBT都会自动把src/resources/index.html复制到target/.../scalajs-bundler/main目录下，完全符合你的需求。

方法二：用Webpack的html-webpack-plugin处理（更推荐） #

如果你希望Webpack自动帮你管理index.html（比如自动注入打包后的JS文件，避免手动修改脚本路径），可以用html-webpack-plugin插件：

• 先在项目根目录安装这个插件，执行命令：

npm install html-webpack-plugin --save-dev

• 在项目根目录创建webpack.config.js文件，添加以下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      // 指定你的源index.html文件路径
      template: path.resolve(__dirname, 'src/main/resources/index.html'),
      // 输出的文件名，会放在Webpack的输出目录里
      filename: 'index.html'
    })
  ]
};

• 最后在build.sbt中告诉Scala.js Bundler使用这个Webpack配置文件：

webpackConfigFile in fastOptJS := Some(baseDirectory.value / "webpack.config.js")

这样Webpack在打包时会自动处理你的index.html：不仅会把它复制到目标目录，还会自动将打包生成的JS文件的脚本标签注入到html中，后续修改打包产物名称也不用手动更新index.html，非常省心。

验证结果 #

执行fastOptJS::webpack后，你可以前往target/scala-<你的Scala版本>/scalajs-bundler/main目录，就能看到index.html已经乖乖待在那里啦～

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