运行npm start时Webpack无法找到index.html页面的问题求助

问题场景 #

作为Node.js新手，你完成了以下操作但遇到访问错误：

1. 通过npm init生成了包含Webpack相关依赖的package.json，配置start脚本为webpack serve
2. 执行npm install --save-dev安装所有依赖
3. 创建了app.scss样式文件和index.html页面
4. 编写了webpack.config.js配置SCSS打包规则
5. 运行npm start后，访问http://localhost:8080/出现Cannot GET /错误，添加index.html后缀也无法访问

问题原因 #

1. Webpack Dev Server未托管静态HTML：默认情况下，dev server仅提供Webpack打包输出的文件，你手动创建的index.html属于未被打包处理的静态文件，不在dev server的服务范围内。
2. 配置格式冗余：你的webpack.config.js用数组包裹配置对象，这是多入口多配置的写法，单配置场景下无需这么做，会增加不必要的复杂度。
3. SCSS打包方式不适配Webpack5：使用file-loader+extract-loader处理SCSS是Webpack4及以前的方案，Webpack5有更适配的内置模块和插件。

解决方案 #

推荐方案：使用html-webpack-plugin+mini-css-extract-plugin #

这两个插件能自动关联HTML与打包资源，同时适配Webpack5的特性：

1. 安装所需插件：

npm install --save-dev html-webpack-plugin mini-css-extract-plugin

2. 修改webpack.config.js配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './app.scss',
  output: {
    filename: 'style-bundle.js',
    clean: true // 每次打包自动清空输出目录
  },
  plugins: [
    // 自动托管并关联index.html与打包资源
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    // 提取SCSS编译后的CSS为独立文件
    new MiniCssExtractPlugin({
      filename: 'bundle.css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader, // 替代extract-loader+file-loader
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              implementation: require('sass'),
              webpackImporter: false
            }
          }
        ]
      }
    ]
  },
  devServer: {
    static: './dist', // 指定静态资源目录
    open: true // 启动后自动打开浏览器
  }
};

3. 重新运行npm start，此时访问http://localhost:8080/即可正常加载页面。

临时快速方案：直接托管当前目录静态文件 #

如果不想安装额外插件，可修改devServer配置直接托管当前目录的静态文件：

module.exports = {
  // 保留原有其他配置
  devServer: {
    static: __dirname // 托管当前目录下所有静态文件
  }
};

这种方式能快速解决访问问题，但无法自动关联打包资源，后续扩展JS入口时需手动修改HTML引入路径，不推荐长期使用。

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