0

网络包版本

webpack: 5.65.0
webpack-cli: 4.9.1
webpack-dev-server 4.7.1

大家好，

我对编码和尝试使用前端的 React 和后端的 Hanami（一个 Ruby 框架）设置一个单体应用程序非常陌生。我想使用 Webpack 来处理我的 .js 和 .jsx 文件，因为我对 Ruby on Rails 很熟悉。

经过几个小时的配置，我设法让 Webpack 工作并成功编译了我的 javascript 文件。但是，我无法进行热重装工作。

我将 webpack devserver 与 Hanami WEBrick 服务器（在不同的端口上）一起运行，Webpack Devserver 成功编译了文件，并且一切都在我的 Hanami 服务器上正确提供。

控制台报告我已成功连接到 HMR 并已启用，如下所示：

控制台输出

但是，每当我对 Webpack 处理的任何 JS / JSX 文件进行更改时，它们都不会触发重新编译。我只有在关闭并重新启动服务器时才能看到更改。

编译成功输出

我通过查看 Webpack Github 存储库以及文档尝试了不同的解决方案，但没有运气。任何想法为什么热重载不起作用？

链接到 Github 存储库

链接到 Github 回购与问题

包.json

  "name": "sakellion",
  "version": "0.0.1",
  "type": "module",
  "private": true,
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "babel-loader": "^8.2.3",
    "rails-erb-loader": "^5.5.2",
    "stats-webpack-plugin": "*",
    "webpack": "*",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "*"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "dependencies": {
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

Webpack.config.cjs 文件：

  StatsPlugin = require("stats-webpack-plugin");

var devServerPort = process.env.WEBPACK_DEV_SERVER_PORT,
  devServerHost = process.env.WEBPACK_DEV_SERVER_HOST,
  publicPath = process.env.WEBPACK_PUBLIC_PATH;

var config = {
  target: "web",
  entry: {
    index: path.join(
      __dirname,
      "apps",
      "web",
      "assets",
      "javascripts",
      "packs",
      "index.js"
    ),
    demo: path.join(
      __dirname,
      "apps",
      "web",
      "assets",
      "javascripts",
      "packs",
      "demo.js"
    ),
  },

  mode: "development",

  output: {
    path: path.join(__dirname, "public"),
    filename: "[name]-[chunkhash].js",
    publicPath: publicPath,
  },

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
      {
        test: /\.erb$/,
        enforce: "pre",
        loader: "rails-erb-loader",
      },
    ],
  },
  plugins: [new StatsPlugin("webpack_manifest.json")],
};

if (process.env.INBUILT_WEBPACK_DEV_SERVER) {
  config.devServer = {
    static: { directory: path.join(__dirname, "public") },
    client: {
      progress: true,
    },
    hot: true,
    watchFiles: ["./apps/web/assets/javascripts/**/*"],
    port: devServerPort,
    headers: { "Access-Control-Allow-Origin": "*" },
    // proxy: {
    //   "/": {
    //     target: `http://localhost:2300`,
    //     secure: false,
    //   },
    // },
  };
  config.output.publicPath = "//" + devServerHost + ":" + devServerPort + "/";
}

module.exports = config;

谢谢！

4

0 回答 0