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

Posted 2023-02-19

【中文标题】webpack-dev-server --hot vs HotModuleReplacementPlugin()

【英文标题】：

【发布时间】：2017-06-30 22:11:38

【问题描述】：

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

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

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

;
 
module.exports = config;

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

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

我正在这样运行我的服务器。

webpack-dev-server --inline --colors --progress

版本。

webpack-dev-server 2.3.0
webpack 2.2.1

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

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

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

.
├── app
│   └── index.js
├── index.html
├── output
│   ├── bundle.js
│   └── index.js
├── package.json
└── webpack.config.js

---

更新

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

devServer: 
compress: true,
publicPath: "http://localhost:8080/static/",
filename: "bundle.js",
hot: true,
inline: true

【参考方案1】：

你可能也想添加这个：

entry: 
    'app': [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        `$PATHS.SOURCE/index.jsx`
    ]

【讨论】：

那个运气不太好：Module not found: Error: Can't resolve 'webpack-dev-server/client?http://localhost:8080' in '/Users/jono/dev/recipist'

【参考方案2】：

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

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

package.json

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

【讨论】：

刚刚尝试添加，但并没有改变结果。我假设我传递给 webpack-dev-server 命令的标志正在做同样的事情。