的WebPack開發服務器livereload文件

https://github.com/Kaffesumpen/keoom-angular 的WebPack開發服務器livereload文件

這裏是我的混帳回購協議，如果任何人想看一看。

大家好，我試圖讓我的WebPack-dev的服務器做了現場重裝，當我更新我的角2的應用程序的HTML和CSS /薩斯模板文件。目前當我更改項目中的任何ts文件或index.html文件時，它會重新加載。如何讓Webpack dev服務器也對模板文件進行實時重載？我現在討論的模板文件是組件元描述中的templateUrl和StyleUrls。

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    templateUrl : './src/app/header/header.component.html', 
    styleUrls: ['./src/app/header/header.component.css'] 

}) 
export class AppComponent { }

webpack.config.js

let webpack = require('webpack'); 
let HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    devtool: "cheap-module-eval-source-map", 
    watch: true, 
    entry: "./src/main", 
    output: { 
    path: './dist', 
    filename: "app.bundle.js" 
    }, 
    resolve: { 
    extensions: ['', '.js', '.ts'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.ts/, loader: 'awesome-typescript-loader!angular2-template' 
     }, 
     { 
     test: /\.html$/, loaders: ['html-loader'] 
     } 
    ] 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     template: './src/index.html' 
    }) 

    ] 
};

bash命令我運行來啓動服務器

webpack-dev-server --inline

來源

2016-08-12 Björn Hjorth

因此，最後我發現了這個錯誤，你正在使用各種老版本的awesome-typescript-loader，這導致了這個麻煩。它從來沒有編譯您

templateUrl: "./header/header.template.html"

到

templateUrl: require("./header/header.template.html")

以webpack可以對變化作出反應並進行重裝

變化

"awesome-typescript-loader": "^2.1.1"

將解決您的問題

來源

2016-08-12 21:44:25

謝謝您花時間幫助我。即使我刪除了--hot標誌，它仍然沒有選擇模板文件（.html）中的更改，我得到了自動刷新，但只在.ts文件中，並且即使使用--hot標誌 –

你試過iframe模式？ –

如果我刪除--inline標誌（以及iframe模式），我會得到相同的結果。 –

的WebPack開發服務器livereload文件

回答

相關問題