Webpack Live Reload 总是落后一步

Question

我刚刚将 "Webpack" 集成到我新创建的 Angular 项目中。

题：

1) 运行命令"npm run start"后，网页可以正常显示。但是，在修改我的文件后，网络会自行刷新，但不会反映出更改。只有当我再进行一项更改时，才会显示我的初始更改。而第二个变化仍然落在后面。

TLDR; webpack-dev-server 似乎慢了一步来反映我的变化。这是为什么？

至此修改后的文件如下：

下面是我的 "webpack.config.js" 文件。

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {AngularCompilerPlugin} = require('@ngtools/webpack');

module.exports = {
  entry: {
    main: ['./src/main.ts'],
    polyfills: ['./src/polyfills.ts']
  },
  output: {
    path: path.join(process.cwd(), 'dist'),
    filename: '[name].bundle.js'
  },
  resolve: {
    extensions: [' ', '.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: "raw-loader"
      },
      {
        test: /\.ts$/,
        loader: "@ngtools/webpack"
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'css-to-string-loader',
          {loader: 'css-loader', options: {sourceMap: true}},
          {loader: 'sass-loader', options: {sourceMap: true}}
        ]
      }
    ]
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + '/src/index.html',
      output: __dirname + '/dist',
      hash: false,
      inject: true,
      compile: true,
      favicon: false,
      minify: false,
      cache: true,
      showErrors: true
    }),
    new AngularCompilerPlugin({
      tsConfigPath: 'tsconfig.json',
      mainPath: __dirname + '/src/main.ts',
      sourceMap: true
    })
  ]
};

下面是我的 "package.json" 文件。

{
  "name": "testwebpack",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "webpack-dev-server --content-base src --hot --inline --port=4200",
    "build": "webpack",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "^8.3.1",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@angularclass/hmr": "^2.1.3",
    "@ngtools/webpack": "^8.3.1",
    "@types/core-js": "^2.5.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "angular2-template-loader": "^0.6.2",
    "codelyzer": "^5.0.0",
    "core-js": "^3.2.1",
    "css-loader": "^3.2.0",
    "css-to-string-loader": "^0.1.3",
    "hot-module-replacement": "^3.0.3",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "raw-loader": "^3.1.0",
    "sass-loader": "^7.3.1",
    "to-string-loader": "^1.1.5",
    "ts-loader": "^6.0.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0"
  }
}

下面是我的 "tsconfig.json" 文件。

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "emitDecoratorMetadata": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Answer 1

出于某种原因，以下代码有效：

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {AngularCompilerPlugin} = require('@ngtools/webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    main: ['./src/main.ts'],
    polyfills: ['./src/polyfills.ts']
  },
  output: {
    path: path.join(process.cwd(), 'dist'),
    filename: '[name].bundle.js'
  },
  resolve: {
    extensions: [' ', '.ts', '.js']
  },
  module: {
    rules: [
      {test: /\.html$/, loader: 'raw-loader'},
      {test: /\.ts$/, loader: '@ngtools/webpack'},
      {test: /\.css$/, exclude: /node_modules/,
      use: [
        'css-to-string-loader',
        {loader: 'css-loader', options: {sourceMap: true}},
        {loader: 'sass-loader', options: {sourceMap: true}}
      ]}
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      output: '/dist',
      inject: true
    }),
    new AngularCompilerPlugin({
      tsConfigPath: 'tsconfig.json',
      mainPath: './src/main.ts',
      sourceMap: true
    }),
    new CopyWebpackPlugin([
      {
        "context": "src",
        "to": "",
        "from": {
          "glob": "assets/**/*",
          "dot": true
        }
      },
      {
        "context": "src",
        "to": "",
        "from": {
          "glob": "favicon.ico",
          "dot": true
        }
      }
    ])
  ]
};

polyfills.ts

import 'core-js/features/reflect';
import 'zone.js/dist/zone';

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import './polyfills';

if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

Answer 2

我遇到了同样的问题，并且能够通过指定与默认端口不同的端口来解决它 :8080

webpack.config.js

module.exports = {
  ...,
  devServer: {
    port: 9000,
  }
}

Webpack Live Reload 总是落后一步

Webpack Live Reload is always one step behind

angular

webpack

webpack-dev-server

livereload

hot-module-replacement