webpack项目执行npm run serve时出现Cannot GET /错误如何解决？

问题根因 #

你使用的webpack-dev-server v4版本默认将打包产物存储在内存中，不会直接读取本地磁盘dist目录的文件。当前配置缺少两个关键逻辑：1. 未指定devServer的静态资源服务目录；2. 未配置html资源的生成/关联规则，所以访问根路径时无法匹配到index.html资源，抛出Cannot GET /报错。

解决步骤 #

• 第一步：安装html-webpack-plugin插件，用于自动关联打包产物与html文件

npm install html-webpack-plugin -D

• 第二步：修改webpack.config.js配置补充缺失项

// 顶部新增插件引入
const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
    entry: './index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js' // 明确指定打包后js文件名
    },
    devServer: {
        open: true,
        historyApiFallback: true,
        host: 'localhost',
        static: path.resolve(__dirname, 'dist'), // 指定静态资源服务目录为dist
        hot: true
    },
    plugins: [
        // 新增html插件配置
        new HtmlWebpackPlugin({
            template: './index.html' 
        })
    ],
    // 其余原有module、resolve配置保持不变即可
};

• 第三步：调整文件位置
  建议将你现在放在dist目录下手动编写的index.html移动到项目根目录，dist目录仅作为打包产物输出目录，不要存放手动编写的源文件，避免内容被打包操作覆盖。
• 第四步：重启服务
  配置修改完成后重新执行npm run serve，即可正常访问根路径加载index.html。

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