Webpack生产配置问题：仅显示dist目录未注入JS文件

问题1：index.html未自动注入main.js脚本标签 #

这是因为Webpack默认不会自动将打包后的JS文件注入到HTML中，需要借助html-webpack-plugin插件实现：

1. 安装插件

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

2. 修改Webpack生产配置文件
   在配置中引入并配置该插件，确保打包时自动生成包含脚本注入的index.html：

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

module.exports = {
  // 已有配置（如entry、module.rules等）...
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 构建前清空dist目录，避免旧文件干扰
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 你的源HTML模板路径，根据实际项目调整
      filename: 'index.html', // 输出到dist目录的文件名
      inject: 'body' // 将脚本注入到body标签末尾，也可设为'head'
    })
  ]
};

重新执行构建命令（如npm run build），此时dist目录下的index.html会自动包含指向main.js的脚本标签。

问题2：访问根路径显示dist目录列表而非网站 #

http-server默认不会自动加载index.html为首页，需要在启动时添加参数指定：

• 启动时直接打开首页并禁用目录列表：

npx http-server . -d false -o

参数说明：

• -d false：关闭目录列表显示

• -o：自动打开浏览器并加载默认首页（即index.html）

• 或者仅指定默认加载index.html：

npx http-server . -o index.html

执行以上命令后，访问http://localhost:8081会直接加载index.html，无需手动点击。

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