2017-08-25 24 views
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の反応する。

答えて

0

問題は、私は特別なのdevのエントリポイントを追加するために必要なことだった:

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

も解決しなければならないそれらのモジュールからresolve.modulesに適切なディレクトリを追加し、忘れませんで。

関連する問題