webpack-dev-serverは1バージョンのバンドルを提供します

Question

Webpackを使用してAngular 2 AOTアプリケーションを構築しています（下記の設定を参照）。私がちょうど実行するときwebpackすべて正常に動作します。 webpack-dev-serverを使用すると、最初のページの読み込みには問題ありませんが、その時からバンドルは常に1つ古いバージョンです。

たとえば、<h1>hello</h1>を含むAngularコンポーネントテンプレートを使用してサーバーを起動すると、「hello」が予想通りに表示されます。テンプレートを<h1>hello world</h1>に変更すると、ページはリロードされますが、「hello」だけが読み取られます（コンソールには[WDS] Nothing changed.と表示されます）。を再度から<h1>goodbye world</h1>に変更すると、ページはリロードされますが、前のリロード時に持っています。

index.html（この場合でもhtml-webpack-pluginを使用していますが）では、この遅延はTypeScriptファイルとAngularテンプレート（TypeScriptファイルにコンパイルされている）でのみ発生します。また、webpack --watchでは発生せず、webpack-dev-serverでのみ発生します。

マイwebpack.config.js：

const webpack = require("webpack"); 
const ngToolsWebpack = require("@ngtools/webpack"); 
const HtmlWebpackPlugin = require("html-webpack-plugin"); 

module.exports = { 
    entry: { 
     app: "./src/main.ts", 
     vendor: ["@angular/core", "@angular/common", "@angular/platform-browser"], 
     polyfill: ["zone.js/dist/zone.js"], 
    }, 
    output: { 
     path: __dirname + "/dist", 
     filename: "[name].js", 
    }, 

    resolve: { 
     extensions: [".ts", ".js"], 
    }, 

    module: { 
     rules: [ 
      { test: /\.html$/, use: "raw-loader" }, 
      { test: /\.css$/, use: "raw-loader" }, 
      { test: /\.ts$/, use: "@ngtools/webpack" }, 
     ], 
    }, 

    plugins: [ 
     new ngToolsWebpack.AotPlugin({ 
      tsConfigPath: "./tsconfig.json", 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      names: ["vendor", "polyfill"], 
     }), 
     new HtmlWebpackPlugin({ 
      template: "src/index.html", 
     }), 
    ], 
}; 

Answer 1

あなたがchunkhashを追加しようとしたことがありますか？

これが役立ちます。