Использование WebPack Hers и Files, а не автоматическая перезагрузка при изменениях ⇐ Javascript

[Anonymous]

Я схожу с ума
Помогать мне всякий раз, когда я запускаю WebPack Sera, и внося изменения в файлы HTML, которые он не будет автоматически переоценить. Это мой файл конфигурации WebPack: < /p>

Код: Выделить всё

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
entry: "./src/bundle.js", // Entry file
mode: 'development',
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
devtool: "inline-source-map", // Enable source maps for development
devServer: {
// filename: "bundle.js",
static:{
directory: path.resolve(__dirname, "dist"),

},
//path.resolve(__dirname, "dist"), // Serve files from `dist`
// historyApiFallback: true, // Redirect 404s to `index.html`
port: 8000, // Use port 8000
hot: true // Enable Hot Module Replacement
},
module: {
rules: [
{
test: /\.css$/i,
include: path.resolve(__dirname, 'src'),
use: ['style-loader', 'css-loader', 'postcss-loader'],
},
{
test: /\.html$/i,
loader: "html-loader",
},
{
test: /\.js$/,
exclude: /node_module/,
use:{
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
},

},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new CleanWebpackPlugin(), // Clean the output directory before each build
new HtmlWebpackPlugin({
filename: "index.html", // Output HTML file
template: "./src/todo.html", // Template HTML file
}),
],

};

< /code>
Это файл HTML: < /p>





Webpack Setup Example



hi
sss



< /code>
Это bundle.js: < /p>
import './style.css';

Это файлы, которые я бы получил, если бы запустил npx webpack:
Файл a687oae JS имеет импорт 'style.css'
Это дерево < /p>

Подробнее здесь: https://stackoverflow.com/questions/793 ... re-changes