Webpack Live Reload 总是落后一步
Webpack Live Reload is always one step behind
我刚刚将 "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
}
}
出于某种原因,以下代码有效:
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));
我遇到了同样的问题,并且能够通过指定与默认端口不同的端口来解决它 :8080
webpack.config.js
module.exports = {
...,
devServer: {
port: 9000,
}
}
我刚刚将 "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
}
}
出于某种原因,以下代码有效:
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));
我遇到了同样的问题,并且能够通过指定与默认端口不同的端口来解决它 :8080
webpack.config.js
module.exports = {
...,
devServer: {
port: 9000,
}
}