webpack-dev-server 热重载不起作用

Question

我的文件结构是：

 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

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

 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'
            }
        ]
    }
};

我跑：

 webpack-dev-server --content-base dist --hot

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

原文由 riccardolardi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 webpack-dev-server 时，它会在内部构建所有文件并且 不会将 它们吐出到您的输出路径中。在没有开发服务器的情况下单独运行 webpack 将实际编译到磁盘。开发服务器在内存中完成所有工作，这大大加快了重新编译的速度。

要解决热重载问题，请将内容库设置为源目录并启用 内联模式

像这样：

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

原文由 Mario Tacke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 // 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 dist/bundle.js 并且没有热替换它时会感到困惑，即使 webpack.config.js 配置为该路径

原文由 fafaro 发布，翻译遵循 CC BY-SA 3.0 许可协议