webpack-dev-server提供一个版本的旧版软件包

Question

我正在使用Webpack构建一个Angular 2 AOT应用程序（请参阅下面的配置）。当我刚刚运行webpack时，一切正常。当我使用webpack-dev-server时，它在第一次加载页面时可以正常工作，但从此开始，该捆绑包始终是旧版本。

例如，当我使用包含<h1>hello</h1>的Angular组件模板启动服务器时，我会按预期看到“hello”。当我然后将模板更改为<h1>hello world</h1>，页面重新加载但仍然只读取“hello”（并且控制台说[WDS] Nothing changed.）当我然后再次将模板更改为到<h1>goodbye world</h1>时，页面将重新加载但读取“hello world”，因为它应该有关于以前的重新加载。

这个延迟不会发生在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？

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].[chunkhash].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", "manifest"], 
     }), 
     new HtmlWebpackPlugin({ 
      template: "src/index.html", 
     }), 
    ], 
}; 

希望这会有所帮助。