在现有原生JS项目中集成Webpack后出现Cannot GET /错误的求助

嘿，我来帮你拆解下这个Cannot GET /错误的根源，以及怎么快速修复它：

你遇到的404错误，本质是Webpack Dev Server 找不到你的入口页面index.html，再加上配置里的几个小问题，导致服务器无法正确响应请求：

1. 缺少HTML处理插件，服务器无页面可返回 #

Webpack默认只处理JS、CSS这类模块，不会自动帮你托管或注入index.html。当你启动webpack-dev-server后，服务器根目录下没有可访问的HTML文件，自然返回Cannot GET /。

2. Entry配置不规范（直接把CSS放进Entry数组） #

虽然style-loader和css-loader能处理CSS，但更稳妥的方式是在JS文件里引入CSS，而不是直接把CSS加入Entry列表。这样Webpack能更清晰地管理依赖关系，避免打包异常。

3. Webpack Dev Server配置缺失，且混淆了磁盘文件与内存文件 #

你手动创建的空bundle.js根本没被用到——webpack-dev-server默认把打包后的文件存在内存中，不会写入磁盘。同时你没配置devServer的静态资源托管规则，服务器不知道该去哪里找你的静态文件。

步骤1：安装必要插件 #

先装html-webpack-plugin，它会帮你复用现有的index.html，还能自动把打包后的bundle.js注入页面：

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

另外如果要自动编译SCSS，还需要装sass-loader和sass：

npm install sass-loader sass --save-dev

步骤2：更新webpack.config.js #

替换成下面的配置，我加了详细注释：

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

module.exports = {
    // 改成单个入口，其他JS和CSS在这个文件里引入
    entry: './js/javascript1.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 生产打包时输出到dist目录
        publicPath: '/',
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                // 建议用babel-loader处理JS（需要装babel-loader/@babel/core/@babel/preset-env），比script-loader更规范
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            // 新增SCSS自动编译规则
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader", "sass-loader"]
            },
            // 处理图片资源
            {
                test: /\.(png|jpg|gif)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'assets/[name][ext]'
                }
            }
        ]
    },
    // 配置Webpack Dev Server
    devServer: {
        static: {
            directory: path.join(__dirname), // 托管项目根目录的静态文件
        },
        hot: true, // 开启热重载
        open: true,
        port: 8080
    },
    plugins: [
        // 复用现有index.html，自动注入bundle.js
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html'
        })
    ]
};

步骤3：在入口JS里引入依赖 #

打开javascript1.js，添加这些引入：

// 引入其他JS文件
import './javascript2.js';
import './javascript3.js';
// 引入CSS（SCSS的话可以直接引入style.scss）
import '../style/style.css';

步骤4：调整package.json脚本 #

简化你的dev脚本，因为我们已经在webpack配置里加了devServer：

{
  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

步骤5：清理冗余文件 #

• 删除你手动创建的空bundle.js，Webpack会在内存中自动生成它
• 你写的server.js现在不需要了，因为webpack-dev-server自带了服务器

你之前的npm run dev启动的是webpack-dev-server，不是你写的server.js——所以你注释掉的路由规则根本没生效。同时因为没有html-webpack-plugin，服务器找不到可返回的index.html，就抛出了Cannot GET /的错误。

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