Question

webpack-dev-server开启 hot 没有效果, 不会自动刷新页面

具体情况：

在 webpack.config.js 中的 devServer 里面配置了 hot 为 true， 运行起来并没有刷新页面，但是实际上已经生成 .hot-update.js并且在 html 中引用了（看浏览器控制台看出来的），想知道为什么没有热更新页面。

相关代码

包版本

"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.6.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

webpack.config.js ( 重点看 devServer 就好 ） ~~~~

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack demo',
      filename: "index.html",
      template: "src/index.html"
    }),
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ["dist"]
    }),
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
      
        test: /.css$/,
       
        use: ["style-loader", 'css-loader']
      }, {
        test: /.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: "[name].[ext]",
              outputPath: 'imgs/'
            }
          }
        ]
      },
      {
        test: /.(woff|woff2|eot|ttf|oth)$/,
        use: ["file-loader"]
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'), 
    port: 8000,
    openPage: 'index.html',
    open: true, 
    hot: true, 
    hotOnly: true, 
  }
};

运行的时候控制台的情况

Answer 1

// 更新
今天重新看了一下这个问题，发现不是 hotOnly 的原因，是因为没有在入口文件配置：

if (module.hot) {
    module.hot.accept('./print.js', function() {
        console.log('Accepting the updated printMe  module!');
        printMe();
    })
}   

具体文档查看：HMR
)