Question

我的文件结构是：

sales, marketing
IT Support, IT Head

我的webpack.config.js看起来像：

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.config.js
package.json

我跑：

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

它构建并且看起来像是在工作。 localhost：8080显示预期的结果，但热重载不起作用。当我更改文件时，我可以在终端中看到正在进行重建，但浏览器中没有任何反应。我在配置中遗漏了什么吗？

Answer 1

对我有用的是在我的<script src="bundle.js">文件中写<script src="dist/bundle.js">而不是index.html。

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

如果您使用dist/bundle.js构建输出文件，那么保持webpack作为输出文件可以正常工作。但是当使用webpack-dev-server时，文件系统中已经存在的静态文件将继续提供，而不是最新的热替换。当webpack-dev-server在html文件中看到dist/bundle.js并且没有热替换它时，似乎webpack.config.js会感到困惑，即使Sub GenerateWorksheets() Dim a as long, b as long, nams as variant with workSheets("Sheet1") nams = .Range(.cells(2, "A"), .cells(.rows.count, "B").end(xlup)).value2 end with For a =lbound(nams, 1) to ubound(nams, 1) For b =1 to nams(a, 2) with workSheets.Add( after:=workSheets(workSheets.Count)) .name = nams(a, 1) & "_" & b end with next b Next a End Sub配置为该路径。

Answer 2

使用webpack-dev-server时，它会在内部构建所有文件，不会将它们吐出到输出路径中。单独运行webpack，不使用dev服务器，将实际编译到磁盘。开发服务器在内存中执行所有操作，从而大大加快了重新编译的速度。

要修复热重新加载问题，请将内容库设置为源目录并启用inline-mode

像这样：

webpack-dev-server --content-base src --hot --inline

Answer 3

- inline --hot对我来说不是一个问题

如果你正在使用redux，可以试试这个。

由于某些随机原因，redux-devtools不允许热重载。尝试从根组件和redux compose config。

中删除它

注意：在商店配置中使用带有此配置的redux devtool浏览器扩展程序：window.devToolsExtension ? window.devToolsExtension() : f => f

另外，必须阅读：https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

或尝试热重装3：例如：https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

Answer 4

Webpack热重装也停止了我的工作。我的解决方案是删除node_modules文件夹并全新安装所有依赖项。只需在终端中打开node_modules的父文件夹，然后运行npm install

即可

Answer 5

唯一对我有用的是在“devServer”（在“webpack.config.js”上）的配置中应用“hotOnly”，如下所示：

devServer: {
    hotOnly: true,
},

重新加载“Webpack Dev Server”后，“Hot Reload”至少在保存 CSS 或 JS 文件中的任何更改后起作用。

Answer 6

试试这个：

在package.json文件中，删除脚本对象下包含"test" "echo \"Error: no test specified\" && exit 1"的行，并将其替换为：

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

然后重新启动项目，只需使用npm start。

当我遇到这个问题时，这对我有用。

编辑：您可以分享您的package.json文件吗？

尝试将此添加到webpack.config.js

devServer: {
  inline: true,
  port: 3000,
  hot: true
},

Answer 7

检查控制台日志是否有错误，然后将cors添加到webpack dev服务器文件

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

理想情况下，在您的开发服务器js

中添加以下条目

headers: { "Access-Control-Allow-Origin": "*" },

Answer 8

100％工作解决方案

您只需遵循3个步骤，即可按预期进行热重载

在webpack配置的“输出”属性中包括“ publicPath”键。 “ publicPath”应包含您bundle.js文件的路径，以便开发服务器可以知道bundle.js文件中是否有任何更改，并将重新加载您的应用程序。

您的配置应如下所示-

output: {
   path: __dirname,
   publicPath:"/dist/js/",
   filename: './dist/js/bundle.js'
}

在配置文件中添加“ devServer”选项-

devServer:{
   contentBase:"/src/",
   inline:true,
   stats:"errors-only"
}

请注意， contentBase 应该指向放置包含脚本标记的index.html文件的路径，在这种情况下，该文件将是“ / src /”

最后，您必须确保index.html中'script'标记的'src'属性指向从“ {http://localhost:port”开始的bundle.js，如下所示-

<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>

在您的情况下，它看起来像这样-

<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>

最后要记住webpack-dev-server doesn't compile your js file or make build or watch on your js文件，它将所有内容分配到内存中以观看必须运行的js文件 webpack --watch 在单独的窗口中

Answer 9

此页面上的所有选项都不适合我。将devServer部分更改为：

devServer: {
    port: 8080,
    contentBase: ['./src', './public'], // both src and output dirs
    inline: true,
    hot: true
},

有效。

Answer 10

我增加了可以观看的文件更改的最大数量，这对我有用。我想对我来说问题是文件太多。

echo fs.inotify.max_user_watches=1999999 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

source

Answer 11

您可以尝试将其添加到您的配置中：

module.exports = {
...
  devServer: {
    contentBase: './dist/', // Since your index.html is in the "dist" dir
    open: true,             // Automatically open the browser
    hot: true,              // Automatically refresh the page whenever bundle.js changes
                            // (You will have to refresh manually if other files change)
  },
...
};

然后运行（无选项）：
webpack-dev-server

Answer 12

使用以上设置，在使用webpack-dev-server进行静态页面构建时，我将bundle js或配置为html页面的任何js文件添加到html页面。这样，在进行任何更改后，我都会在我的静态页面上刷新。

webpack-dev-server热重装无法正常工作

12 个答案: