Question

我正在使用Webpack构建一个Angular 2 AOT应用程序（请参阅下面的配置）。当我运行webpack时一切正常。当我使用webpack-dev-server时，它适用于第一页加载，但从那时起，该包总是一个旧版本。

例如，当我使用包含<h1>hello</h1>的Angular组件模板启动服务器时，我看到＆＃34; hello＆＃34;正如所料。当我将模板更改为<h1>hello world</h1>时，页面会重新加载但仍然只读取＆＃34; hello＆＃34; （并且控制台说[WDS] Nothing changed.）当我再次将模板更改为 <{1}}时，页面会重新加载，但会读取＆＃34; hello world＆＃34;因为它应该在之前的重新加载。

<h1>goodbye world</h1>（即使我使用的是index.html），只有TypeScript文件和Angular模板（编译为TypeScript文件）才会发生此延迟。 html-webpack-plugin也不会发生这种情况，只有webpack --watch。

我的webpack-dev-server：

webpack.config.js

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",
        }),
    ],
};

希望这有帮助。

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

1 个答案: