我正在使用webpack 5，并且目前已经设置如下：
- webpack.prod.js - 我在这里为生产环境进行了一些特定的配置（例如图像压缩、devtool、CSS缩小、特定的meta标签值）
- webpack.dev.js - 我在这里为开发环境进行了一些特定的配置（例如没有图像压缩，没有CSS缩小，特定的meta标签值）
目前我面临的问题是无法使webpack dev server的实时重新加载生效（适用于所有文件类型）。我查看了文档，但迄今为止没有运气。
据我所知，在开发模式下，webpack在内存中运行而不是在磁盘上（这应该更快，非常好！）。由于某种原因，似乎观察程序没有响应devServer.watchFiles配置中指定的文件的更改。我期望Webpack能够检测到typescript文件的更改，编译并重新加载页面，但这并没有发生。
以下是两个文件的内容。
webpack.prod.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const buildPath = path.resolve(__dirname, 'dist');
module.exports = {
//devtool: 'source-map',
entry: {
index: "./src/index/index.ts",
error: "./src/error/error.ts",
},
output: {
filename: "js/[name].[contenthash].js",
path: buildPath,
clean: true,
},
module: {
rules: [{
test: /\.ts$/i,
exclude: /node_modules/,
use: "ts-loader",
},
{
test: /\.html$/i,
exclude: /node_modules/,
use: "html-loader",
},
{
test: /\.css$/i,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
]
},
{
test: /\.png$/i,
exclude: /node_modules/,
type: "asset/resource",
generator: {
filename: "img/[name].[contenthash][ext]",
},
},
{
test: /\.(woff|woff2|ttf)$/i,
exclude: /node_modules/,
type: "asset/resource",
generator: {
filename: "fonts/[name].[contenthash][ext]",
},
},
{
test: /\.mp3$/i,
exclude: /node_modules/,
type: "asset/resource",
generator: {
filename: "[name].[contenthash][ext]",
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index/index.ejs",
inject: "body",
chunks: ["index"],
filename: "index.html",
meta: {
"robots": {
name: "robots",
content: "index,follow"
},
},
}),
new HtmlWebpackPlugin({
template: "./src/error/error.html",
inject: "body",
chunks: ["error"],
filename: "error.html",
}),
new MiniCssExtractPlugin({
filename: "css/[name].[contenthash].css",
chunkFilename: "css/[id].[contenthash].css",
}),
new CopyPlugin({
patterns: [{
from: "src/robots.txt",
to: "robots.txt",
}, ],
}),
],
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
}),
new CssMinimizerPlugin(),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
["imagemin-pngquant", {
quality: [0.5, 0.9]
}],
],
},
},
}),
],
},
};webpack.dev.js:
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "development",
devtool: "eval-cheap-module-source-map",
entry: {
index: "./src/index/index.ts",
error: "./src/error/error.ts",
},
devServer: {
watchFiles: [path.resolve(__dirname, "src/**/*")],
open: true,
},
module: {
rules: [
{
test: /\.ts$/i,
exclude: /node_modules/,
use: "ts-loader",
},
{
test: /\.html$/i,
exclude: /node_modules/,
use: "html-loader",
},
{
test: /\.css$/i,
exclude: /node_modules/,
use: ["style-loader", "css-loader"]
},
{
test: /\.png$/i,
exclude: /node_modules/,
type: "asset/resource",
generator: {
filename: "img/[name].[contenthash][ext]",
},
},
{
test: /\.(woff|woff2|ttf)$/i,
exclude: /node_modules/,
type: "asset/resource",
generator: {
filename: "fonts/[name].[contenthash][ext]",
},
},
{
test: /\.mp3$/i,
exclude: /node_modules/,
type: "asset/resource",
generator: {
filename: "[name].[contenthash][ext]",
},
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index/index.ejs",
inject: "body",
chunks: ["index"],
filename: "index.html",
meta: {
"robots": { name: "robots", content: "noindex, nofollow" },
},
}),
new HtmlWebpackPlugin({
template: "./src/error/error.html",
inject: "body",
chunks: ["error"],
filename: "error.html"
}),
],
optimization: {
runtimeChunk: "single",
},
};
<img src="/kitty.png" />/代表公共路径，通常指向根目录中名为public的文件夹。你可以使用https://webpack.js.org/guides/public-path/修改该路径。我刚试过了，对我有效。刷新页面一切正常。 - Nicolás Juárez Nuño<img src="<%- require('../img/banner.png') %>" />，所以我不确定公共路径在这里是否起作用。因为在第一次加载时，图像加载得很好，但是任何后续刷新都会导致404。 - nobitta