Currently, I am utilizing vscode to work on a webpack project. Within this project, I am using html-webpack-plugin to construct html files in the /dist directory. However, an issue has arisen during watch mode where, upon saving a file with no changes or just adding some spaces or blank lines, my index.html file within /dist gets unexpectedly deleted. This puzzling behavior has left me searching for the root cause of this problem.
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
var extractPlugin = new MiniCssExtractPlugin({
chunkFilename: '[hash].css',
});
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
main: ['./src/js/main.js', './src/scss/project/main.scss'],
// page1: ['./src/js/page1.js','./src/scss/project/page1.scss]
},
output: {
chunkFilename: '[hash].js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'production',
module: {
rules: [
{
test: /\.html$/,
use: [
{ loader: 'html-loader' }
]
},
{
test: /.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
},
{
test: /\.(js)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: require.resolve("jquery-mousewheel"),
use: "imports-loader?define=>false&this=>window"
},
{
test: /\.(png|svg|jpg|gif)$/,
loader: 'file-loader',
options: {
outputPath: 'assets/images',
publicPath: 'assets/images',
}
},
],
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
plugins: [
extractPlugin,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
chunks: ['main']
}),
// new HtmlWebpackPlugin({
// filename: 'page1.html',
// template: 'page1.html',
// chunks: ['page1']
// }),
new CleanWebpackPlugin(),
new CopyPlugin(
[
{ from: 'src/static', to: 'static' },
]
),
],
optimization: {
splitChunks: {
chunks: 'all'
},
},
resolve: {
alias: {
'@img': path.resolve(__dirname, 'src/assets/images'),
},
}
};