Question

最新的webpack和webpack-dev-server。

webpack.config（typescript）：

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会重新编译（在控制台中），但客户端没有做出反应。

Answer 1

问题在于我需要添加特殊的dev入口点：

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

也不要忘记，在resolve.modules添加适当的目录，从那里解决这些模块。

无法使webpack HMR正常工作

1 个答案: