首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >webpack-dev-server --hot ()

webpack-dev-server --hot ()
EN

Stack Overflow用户
提问于 2017-02-13 01:27:11
回答 2查看 10.5K关注 0票数 5

有了下面的配置,我就可以使用HotModuleReplacementPlugin()来替换热模块,但在运行webpack-dev服务器时不能使用--hot。我的问题是,为什么?

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

代码语言:javascript
运行
复制
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;

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

代码语言:javascript
运行
复制
<script src="static/bundle.js"></script>

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

代码语言:javascript
运行
复制
webpack-dev-server --inline --colors --progress

版本。

代码语言:javascript
运行
复制
webpack-dev-server 2.3.0
webpack 2.2.1

使用此设置,热模块加载工作正常。如果我删除插件,并运行服务器附加--热(正如我在许多例子中看到的),我的热模块加载不能工作。服务器注册更改,transpile发生,我的网页看起来像是在重新加载,但内容不更新。

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

结构类似于这个+一个node_modules目录。

代码语言:javascript
运行
复制
.
├── app
│   └── index.js
├── index.html
├── output
│   ├── bundle.js
│   └── index.js
├── package.json
└── webpack.config.js

更新

还尝试将devServer添加到webpack配置中,结果是相同的。

代码语言:javascript
运行
复制
devServer: {
compress: true,
publicPath: "http://localhost:8080/static/",
filename: "bundle.js",
hot: true,
inline: true

}

EN

回答 2

Stack Overflow用户

发布于 2017-02-13 16:35:40

您可能还需要添加以下内容:

代码语言:javascript
运行
复制
entry: {
    'app': [
        'webpack-dev-server/client?http://localhost:8080',
        'webpack/hot/only-dev-server',
        `${PATHS.SOURCE}/index.jsx`
    ]
}
票数 1
EN

Stack Overflow用户

发布于 2017-02-13 14:00:26

在您的文件中设置了devServer属性吗?

代码语言:javascript
运行
复制
devServer: {
    ...
    historyApiFallback: true,
    hot: true,
    inline: true,
    compress: true,
    ...
},
plugins: [
     new webpack.HotModuleReplacementPlugin(),
     ...
],
...

package.json

代码语言:javascript
运行
复制
"scripts": {
    "development": "webpack-dev-server --progress --colors"
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42195351

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档