从零搭建React项目index.html引入JS报404，webpack配置问题求助

问题根因 #

你遇到的404问题由两个配置缺失导致：

• webpack默认不会自动将public目录下的静态资源打包到输出的dist目录，生产环境打包后会丢失assets下的js文件
• 开发服务devServer配置了static: false，关闭了静态资源托管，开发环境无法访问到public/assets下的资源

解决方案 #

1. 安装静态资源复制插件 #

执行命令安装copy-webpack-plugin，用于打包时将public下的静态资源同步到dist目录：

npm install copy-webpack-plugin --save-dev

2. 修改webpack配置 #

修改后的完整配置如下，核心改动点：

• 引入copy-webpack-plugin并添加到插件列表，配置复制规则
• 修改devServer.static配置，开启静态资源托管指向public目录

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const Dotenv = require("dotenv-webpack");
const webPack = require("webpack");
const PUBLIC_DIR = path.resolve(__dirname, "public/assets");
const webpackPlugins = [
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, "public/index.html"),
    filename: "index.html",
    inject: true,
  }),
  // 新增：复制public/assets下的资源到dist/assets
  new CopyWebpackPlugin({
    patterns: [
      {
        from: PUBLIC_DIR,
        to: path.resolve(__dirname, "dist/assets")
      }
    ]
  }),
  new Dotenv({
    path: "./.env",
    systemvars: true,
  }),
  new webPack.DefinePlugin({
    "process.env.PUBLIC_DIR": JSON.stringify(PUBLIC_DIR),
  }),
];
module.exports = {
  context: __dirname,
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
    publicPath: "/",
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    // 改：开启静态资源托管，指向public目录
    static: {
      directory: path.join(__dirname, 'public'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpg|png)$/,
        use: {
          loader: "url-loader",
        },
      },
    ],
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  plugins: webpackPlugins,
};

3. 调整index.html的资源引用路径 #

因为配置了publicPath: "/"，建议把相对路径改为绝对路径，避免嵌套路由场景下路径解析错误：

<body>
  <div id="root"></div>
  <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
  <script type="text/javascript" src="/assets/js/slimscroll/jquery.slimscroll.min.js"></script>
  <script type="text/javascript" src="/assets/js/bootstrap.js"></script>
  <script type="text/javascript" src="/assets/js/app.js"></script>
  <script type="text/javascript" src="/assets/js/app.plugin.js"></script>
</body>

是否要切换为create-react-app #

如果没有特殊的自定义配置需求，完全可以直接使用create-react-app，它默认内置了public目录静态资源的托管、复制逻辑，不需要手动处理上述配置，能减少很多工程化问题的排查成本。

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