构建后如何将index.html文件自动移动至dist目录？

方案一：使用copy-webpack-plugin（推荐跨平台） #

这是webpack生态中成熟的文件复制插件，能精准控制文件复制路径，适配各类操作系统。

1. 安装插件

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

2. 修改webpack配置文件
   找到项目中的webpack.config.js，引入插件并添加对应配置：

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

module.exports = {
  // 保留你原本的entry、output等核心配置
  plugins: [
    // 其他已配置的插件...
    new CopyPlugin({
      patterns: [
        {
          from: './index.html', // 替换为你项目中index.html的实际路径
          to: './dist/' // 目标目录，webpack构建生成dist后会自动完成文件复制
        },
      ],
    }),
  ],
};

如果之前配置过html-webpack-plugin，建议暂时注释掉相关配置，避免它生成的空index.html和复制过来的文件产生冲突。

方案二：用shell命令直接移动（简单但需注意跨平台） #

如果不想额外安装插件，可以在package.json的build命令里追加移动操作：

• 类Unix系统（Mac/Linux）：

"scripts": {
  "build": "webpack && cp index.html dist/"
}

• Windows系统：

"scripts": {
  "build": "webpack && copy index.html dist\\"
}

若需要跨平台兼容，可配合cpy-cli这类工具，但还是推荐第一种插件方案更省心稳定。

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