【发布时间】：2022-12-04 16:19:45
【问题描述】：
我正在使用 webpack 5，我目前有以下设置：
- webpack.prod.js - 我有一些特定的生产配置（例如图像压缩、devtool、CSS 缩小、特定的元标记值）
- webpack.dev.js - 我有一些特定的开发配置（例如没有图像压缩，没有 CSS 缩小，特定的元标记值）
我目前面临的问题是我无法获得webpack 开发服务器实时重新加载工作（这适用于所有文件类型）。我已经阅读了文档，但到目前为止还没有运气。
据我所知，在开发模式下，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",
},
};【问题讨论】：
标签： webpack webpack-dev-server webpack-5 webpack-hmr