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

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当它dist/bundle.js在html文件中看到并且不热替换它时,它似乎变得混乱,即使webpack.config.js配置为该路径.

Answer 2

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

要修复热重新加载问题,请将内容库设置为源目录并启用内联模式

像这样:

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

Answer 3

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

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

有效。

Answer 4

对于 Webpack ^5.72.1

这对我有用，

 devServer: {
    port: 3000,
    hot: false,
    liveReload: true,
  },

注意：liveReload 将在文件保存时重新加载整个应用程序，但会丢失应用程序状态。热重载保留状态。但 liveReload 似乎为我解决了保存后 css/html 未在浏览器上加载的问题，而无需刷新浏览器。