时间戳

首页 > 解决方案 > /dist 中的 index.html 在保存时被删除，并且在 webpack 监视模式期间不会再次重新构建（如果没有更改文件）

javascript - /dist 中的 index.html 在保存时被删除，并且在 webpack 监视模式期间不会再次重新构建（如果没有更改文件）

问题描述

我正在使用 vscode。我正在尝试构建一个 webpack 项目。我使用 html-webpack-plugin 在 /dist 中构建 html 文件，但我发现当我使用监视模式并保存文件时不做任何更改（或者只是获得一些空格或空行），我的 index.html 在 /dist只是被删除，我无法弄清楚这里发生了什么。这是我的 webpack 配置文件：

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'),
        },
    }
};

标签： javascriptwebpack

解决方案

我遇到了同样的问题并在这里找到了解决方案：https ://webpack.js.org/guides/development/

我引用：

告诉 CleanWebpackPlugin 我们不想在 watch 触发的增量构建之后删除 index.html 文件。我们使用 cleanStaleWe​​bpackAssets 选项来做到这一点：

所以在我的情况下，我只需要添加这样的选项：

new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),

推荐阅读