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 ，而不使用dev服务器，将实际的编译工作复制到磁盘上.开发服务器会执行内存中的所有操作，从而大大加快了重新编译的速度.

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屋！