webpack-dev-server --hot vs HotModuleReplacementPlugin（）-Java 学习之路

使用以下配置，我可以使用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

Update

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

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

}

2 回答

您可能还想添加它：

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

回复于 2024-04-27T03:01:06+08:00

您是否在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"
}

回复于 2024-04-27T03:01:06+08:00

webpack-dev-server --hot vs HotModuleReplacementPlugin（）

2 回答

相关问题