webpack-dev-server --hot 与 HotModuleReplacementPlugin()

Question

通过以下配置，我已经能够使用 HotModuleReplacementPlugin() 进行热模块替换，但在运行 webpack-dev-server 时不能使用 --hot 。我的问题是，为什么？

\n\n

几乎所有最近设置热模块替换的指南都使用 --hot，但它对我不起作用。

\n\n

\r\n

\r\n

var webpack = require("webpack");\r\nvar path = require("path");\r\n \r\nconst config = {\r\n  entry: path.resolve(__dirname, \'app/index.js\') ,\r\n  output: {\r\n    path: path.resolve(__dirname, \'output\'),\r\n    filename: \'bundle.js\',\r\n    publicPath: "static/"\r\n  },\r\n  module: {\r\n    rules: [\r\n      {test: /\\.(js|jsx)$/, use: \'babel-loader\'}\r\n    ]\r\n  },\r\n  plugins: [\r\n    new webpack.HotModuleReplacementPlugin()\r\n  ]\r\n\r\n};\r\n \r\nmodule.exports = config;

\r\n

\r\n

\r\n

\n\n

我像这样引用我的代码文件。

\n\n

<script src="static/bundle.js"></script>\n

\n\n

我像这样运行我的服务器。

\n\n

webpack-dev-server --inline --colors --progress\n

\n\n

版本。

\n\n

webpack-dev-server 2.3.0\nwebpack 2.2.1\n

\n\n

通过此设置，热模块加载可以正常工作。如果我删除插件，并运行附加 --hot 的服务器（正如我在许多示例中看​​到的那样），我的热模块加载将不起作用。服务器注册更改，进行转换，我的网页看起来像是正在重新加载，但内容没有更新。

\n\n

我通过http://localhost:8080/webpack-dev-server/index.html访问

\n\n

结构看起来像这样+一个node_modules目录。

\n\n

.\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 output\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 bundle.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 index.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 webpack.config.js\n

\n\n

---

\n\n

更新

\n\n

还尝试将 devServer 添加到 webpack 配置中，其结果相同。

\n\n

devServer: {\ncompress: true,\npublicPath: "http://localhost:8080/static/",\nfilename: "bundle.js",\nhot: true,\ninline: true\n

\n\n

}

\n

Answer 1

您是否在 webpack.config.js 文件中设置了devServer属性？

devServer: {
    ...
    historyApiFallback: true,
    hot: true,
    inline: true,
    compress: true,
    ...
},
plugins: [
     new webpack.HotModuleReplacementPlugin(),
     ...
],
...

包.json

"scripts": {
    "development": "webpack-dev-server --progress --colors"
}