无法使 webpack HMR 工作

Posted 2023-03-06

【中文标题】无法使 webpack HMR 工作

【英文标题】：Can not make webpack HMR work

【发布时间】：2018-02-03 11:04:31

【问题描述】：

最新的 webpack 和 webpack-dev-server。

webpack.config（打字稿）：

import * as webpack from 'webpack'
import * as path from 'path'
var htmlWebpackPlugin = require('html-webpack-plugin')

const config = <webpack.Configuration>
  entry: 
    build: path.resolve(__dirname, '../test')
  ,
  output: 
    filename: '[name].js', //-[chunkhash]
    chunkFilename: '[name].js',
    publicPath: '/'
  ,
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin(
      title: 'Webpack: Hmrl',
      filename: 'index.html'
    )
  ],
  module: 
    loaders: [
       test: /\.ts$/, loader: 'awesome-typescript-loader' 
    ]
  ,
  devServer: 
    overlay: true,
    hot: true,
    stats:  colors: true, chunks: false ,
    port: 80,
    watchOptions: 
      aggregateTimeout: 100,
      poll: 100
    ,
    disableHostCheck: true,
    host: '0.0.0.0',
    historyApiFallback: 
      index: 'index.html',
    
  ,
  devtool: 'eval',
  resolve: <any>
    symlinks: false,
    extensions: ['.ts', '.js'],
  ,
  resolveLoader: <any>
    modules: [
      path.resolve(__dirname, 'node_modules')
    ]
  


export = config

我使用 node.js API 启动 webpack-dev-server

const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const config = require('./webpack.config.test')

new WebpackDevServer(webpack(config), config.devServer)
  .listen(process.env.PORT || 80)

test.ts:

console.log('test app here')

module.hot.accept()

服务器控制台输出：

[at-loader] Checking started in a separate process...
client-webpack_1  |
client-webpack_1  | [at-loader] Ok, 2.672 sec.
client-webpack_1  |
client-webpack_1  | [at-loader] Using typescript@2.4.2 from typescript and "tsconfig.json" from /app/tsconfig.json.
client-webpack_1  |
client-webpack_1  |
client-webpack_1  | [at-loader] Checking started in a separate process...
client-webpack_1  |
client-webpack_1  | [at-loader] Ok, 3.527 sec.
client-webpack_1  | Hash: fd98bbcdafd2f3861dd6
client-webpack_1  | Version: webpack 3.5.5
client-webpack_1  | Time: 9690ms
client-webpack_1  |      Asset       Size  Chunks             Chunk Names
client-webpack_1  |   build.js    27.9 kB       0  [emitted]  build
client-webpack_1  | index.html  184 bytes          [emitted]
client-webpack_1  |    [0] ./test.ts 53 bytes 0 [built]
client-webpack_1  | Child html-webpack-plugin for "index.html":
client-webpack_1  |          Asset    Size  Chunks  Chunk Names
client-webpack_1  |     index.html  586 kB       0
client-webpack_1  |        [0] ./webpack/node_modules/html-webpack-plugin/lib/loader.js!./webpack/node_modules/html-web
pack-plugin/default_index.ejs 538 bytes 0 [built]
client-webpack_1  |        [1] ./webpack/node_modules/lodash/lodash.js 540 kB 0 [built]
client-webpack_1  |        [2] (webpack)/buildin/global.js 509 bytes 0 [built]
client-webpack_1  |        [3] (webpack)/buildin/module.js 517 bytes 0 [built]
client-webpack_1  | webpack: Compiled successfully.
client-webpack_1  | webpack: Compiling...
client-webpack_1  |
client-webpack_1  | [at-loader] Checking started in a separate process...
client-webpack_1  |
client-webpack_1  | [at-loader] Ok, 0.003 sec.
client-webpack_1  | Hash: 22b4a5abcf6d108e1fd4
client-webpack_1  | Version: webpack 3.5.5
client-webpack_1  | Time: 394ms
client-webpack_1  |                                Asset       Size  Chunks             Chunk Names
client-webpack_1  | 4b8c70cb56fb58c7b8fb.hot-update.json   44 bytes          [emitted]
client-webpack_1  |                             build.js    27.9 kB       0  [emitted]  build
client-webpack_1  | fd98bbcdafd2f3861dd6.hot-update.json   35 bytes          [emitted]
client-webpack_1  |                           index.html  184 bytes          [emitted]
client-webpack_1  |    [0] ./test.ts 53 bytes 0
client-webpack_1  | Child html-webpack-plugin for "index.html":
client-webpack_1  |                                    Asset      Size  Chunks             Chunk Names
client-webpack_1  |                               index.html    586 kB       1
client-webpack_1  |     4b8c70cb56fb58c7b8fb.hot-update.json  44 bytes          [emitted]
client-webpack_1  |        [0] ./webpack/node_modules/html-webpack-plugin/lib/loader.js!./webpack/node_modules/html-web
pack-plugin/default_index.ejs 538 bytes 1
client-webpack_1  |        [1] ./webpack/node_modules/lodash/lodash.js 540 kB 1
client-webpack_1  |        [2] (webpack)/buildin/global.js 509 bytes 1
client-webpack_1  |        [3] (webpack)/buildin/module.js 517 bytes 1
client-webpack_1  | webpack: Compiled successfully.

客户端控制台输出：

test.ts:1 test app here

客户端控制台没有关于 [WDS] 或 [HMR] 的任何通知

如果我更改文件，webpack 会重新编译（在控制台中），但客户端没有反应。

【参考方案1】：

问题是我需要添加特殊的开发入口点：

build: [
      resolve(__dirname, '../test'),
      'webpack-dev-server/client',
      'webpack/hot/only-dev-server'
    ]

也不要忘记，将适当的目录添加到 resolve.modules 应该从哪里解析这些模块。

【讨论】：

嘿伙计，我在 webpack.config.js 中没有遇到任何build 入口点吗？我在哪里添加这些？