Webpack-dev-server HMR 不适用于 Angular 应用

Question

在我的 Angular 应用程序中，我正在尝试使用 webpack-dev-server。我的 webpack 配置如下：

//"use strict";

var webpack = require("webpack");

const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin;

const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const resolve = require('path').resolve;

module.exports = function(env) {
  var environment = "'development'";
  console.log("Env: " + environment);

  return {
    stats: "errors-only",
    devtool: "source-map",
    mode: (environment == "'production'") ? "production" : "development",

    entry: {
      "polyfills": "./polyfills.ts",
      "vendor": "./vendor.ts",
      "main": "./main.ts",
      "styles": "./styles.ts"
    },

    resolve: {
      modules: [
        "node_modules",
        path.resolve(process.cwd(), "src")
      ],
      extensions: [".ts", ".js"]
    },
    context: path.join(process.cwd(), "./src"),

    output: {
      globalObject: 'this',
      path: path.join(process.cwd(), "dist"),
      publicPath: '/',
      filename: "[name].bundle.js",
      chunkFilename: "[name].chunk.js"
    },
    target: 'web',
    devServer: {
      disableHostCheck: true,
      host: require("os").hostname().toLowerCase(),
      publicPath: "/",
      port: 3000,
      watchContentBase: true,
      watchOptions: {
        poll: true
      },
      inline: true,
      hot: true,
      historyApiFallback:  {
        index: "/index.html"
      },
      https: true,
      proxy: {
        "/api": {
          //target: "https://" + require("os").hostname().toLowerCase() + "/"
          target:'https://URL.edu/',
          secure: false,
          changeOrigin:true,
          logLevel:"debug"
        },
        "/legacy/api": {
          //target: "https://" + require("os").hostname().toLowerCase() + "/"
          target:'https://URL.edu/',
          secure: false,
          changeOrigin:true,
          logLevel:"debug"
        },
        "/auth": {
          //target: "https://" + require("os").hostname().toLowerCase() + "/"
          target:'https://URL.edu/',
          secure: false,
          changeOrigin:true,
          logLevel:"debug"
        }
      },
      contentBase: "/src/",
     // contentBase:path.resolve(__dirname, 'build'),
      stats: {
        colors: true,
        hash: false,
        version: false,
        timings: false,
        assets: true,
        chunks: false,
        modules: false,
        reasons: true,
        children: false,
        warnings: true,
        publicPath: false
      }
    },

    module: {
      rules: [
        {
          test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
          loader: '@ngtools/webpack'
        },
        {
          test: /\.html$/,
          loader: "html-loader"
        },
        {
          test: /\.less$/,
          loader: "raw-loader!less-loader"
        },
        {
          test: /\.scss$/,
          use: ["raw-loader", "sass-loader"]
        },
        {
          test: /\.css$/,
          use: ["style-loader", "css-loader"]
         // use: [ "css-loader"]
        },
        {
          test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=application/font-woff"
        },
        {
          test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=application/font-woff"
        },
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=application/octet-stream"
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
          loader: "file-loader"
        },
        {
          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
          loader: "url-loader?limit=10000&mimetype=image/svg+xml"
        }
      ]
    },

    plugins: [
      new webpack.ProgressPlugin(),


      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        path.join(process.cwd(), "src")
      ),

      new HtmlWebpackPlugin({
        filename: "index.html",
        template: "index.html"
      }),
      new webpack.HotModuleReplacementPlugin(),

      new CopyWebpackPlugin([
        {
          from: "favicon.ico",
          to: "favicon.ico"
        },
        {
          from: "assets",
          to: "assets"
        },
        {
          from: "data",
          to: "data"
        }
      ]),

      new AngularCompilerPlugin({
        tsConfigPath: "./tsconfig.json",
        entryModule: "./src/app/app.module.ts#AppModule",
        sourceMap: true
      }),

      new webpack.DefinePlugin({
        "ENV": environment,
        "process.env": {
          "ENV": environment,
          "NODE_ENV": environment
        },
        "CONTENT_PATH": "'/ccr2/'",
        "VERSION": JSON.stringify(require("../package.json").version),
        "USE_HASH": true
      }),

      new webpack.ProvidePlugin({
        d3: "d3"
      })
    ]
  };
}

但是，当我更改代码时，我发现它会导致浏览器重新加载页面而不是 HMR。

任何人都可以发现我遗漏的东西或有关如何使其发挥作用的任何想法吗？

如果有人想看，我可以添加 package.json。

Answer 1

我必须在 main.ts 中添加以下内容：

///<reference types="webpack-env" />
if (module.hot) {
  module.hot.accept();
}

另外，有用的是在 chrome 控制台上使用“保留日志”选项。