1
最新のwebpackとwebpack-dev-server。webpack HMRの作業を行うことができません
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
は、私が使用してのWebPACK-devのサーバーを起動Node.jsのAPI
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()
Serverコンソール出力:
[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 [email protected] 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
私は(コンソールで)ファイル、WebPACKのの再コンパイルを変更する場合は、クライアントコンソールは[WDS]または[HMR]について予告
をしていないが、クライアントは」doesnの反応する。