webpack-dev-server运行报错Cannot GET /无法渲染index.html怎么解决

问题根源 #

你遇到的404错误是由webpack-dev-server的static配置错误导致的：
devServer.static.publicPath 字段指定了本地静态资源在服务端的暴露路径，你当前配置为/scripts/，意味着public目录下的所有内容仅会挂载到服务的/scripts/路由下，直接访问根路径/自然无法找到index.html文件。

修复步骤 #

• 修改webpack.config.js中的devServer配置：

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public/scripts'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    },
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'public'),
            // 将publicPath修改为根路径，也可以直接删除该行，默认值就是'/'
            publicPath: '/'
        },
        // 可选配置：启动服务后自动打开浏览器访问页面
        open: true
    }
}

• 确认public目录下的index.html中引入打包文件的路径正确，应为：

<script src="/scripts/bundle.js"></script>

• 重启webpack-dev-server即可生效，执行命令：
  npm run dev-server

配置说明 #

• devServer.static.directory：指定需要托管的本地静态资源根目录，你当前配置的public目录无需修改
• devServer.static.publicPath：指定托管的静态资源在服务端的访问前缀，修改为/后，访问服务根路径就可以直接读取public目录下的index.html文件

内容的提问来源于stack exchange，提问作者Muhammad Abd-Elsattar