webpack-dev-server 热重载不起作用 [英] webpack-dev-server hot reload not working

问题描述

我的文件结构是:

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 看起来像:

My webpack.config.js looks like:

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 显示了预期的结果，但热重载不起作用.当我更改文件时，我可以在终端中看到正在重建，但浏览器中没有任何反应.我在配置中遗漏了什么吗?

And it builds and seems like it's working. localhost:8080 shows the expected result but hot-reload does just not work. When I change a file I can see in terminal that a rebuild is happening but nothing happens in the browser. Am I missing something in the config?

推荐答案

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

When using webpack-dev-server, it builds all files internally and does not spit them out into your output path. Running webpack alone, without the dev server, does the actual compilation to disk. The dev server does everything in memory which speeds up re-compilation by a lot.

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

To fix your hot reload issue, set the content base to your source directory and enable inline-mode

像这样:

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

这篇关于webpack-dev-server 热重载不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！