Webpack监视模式不适用于html-webpack和clean-webpack插件

插口

当我以监视模式运行Webpack(不使用开发服务器)时,一切都会在第一次正确构建,但是当我更改非HTML文件的任何代码时,由于该HTML文件不会被重建并没有更改,因此clean-webpack-plugin认为它是陈旧资产,并将其及其所有依赖项删除。我怎样才能解决这个问题?我必须摆脱clean-webpack-plugin吗?

我的webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const mode = process.env.NODE_ENV || 'development';

module.exports = {
    mode,
    watch: mode === 'development',
    entry: {
        popup: path.join(__dirname, 'src', 'ts', 'popup.ts')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: ['ts-loader', 'eslint-loader'],
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'html-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: ['file-loader'],
            }
        ]
    },
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.ts', '.js']
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'popup.html'),
            filename: 'popup.html',
            chunks: ['popup'],
        }),
        new CopyWebpackPlugin({
            patterns: [{
                from: 'src/manifest.json',
                transform: function(content) {
                    return Buffer.from(JSON.stringify({
                        description: process.env.npm_package_description,
                        version: process.env.npm_package_version,
                        ...JSON.parse(content.toString())
                    }));
                }
            }]
        })
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};
法瓦兹

如果您的index.html文件在每次重建中都没有重新生成(从上面的选项中看起来不像),则必须将setcleanStaleWebpackAssets选项设置falseclean-webpack-plugin。

new CleanWebpackPlugin({cleanStaleWebpackAssets:false})

https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Webpack插件definePlugin和CommonsPlugin

来自分类Dev

webpack配置不适用于我的scss文件:(

来自分类Dev

document.getElementById不适用于Webpack

来自分类Dev

Webpack externals 似乎不适用于嵌套对象。

来自分类Dev

Workbox Webpack插件和Webpack Dev Server问题

来自分类Dev

外部库参考适用于Webpack,但不适用于Aurelia中的JSPM

来自分类Dev

背景图像适用于 CSS 但不适用于 Webpack 的 JS

来自分类Dev

ESLint no-undef和webpack插件

来自分类Dev

Webpack:提取文本插件和代码拆分

来自分类Dev

Webpack和React jsx-热加载不适用于Docker容器

来自分类Dev

Node.js核心模块fs不适用于webpack和angular2 cli

来自分类Dev

Webpack插件观看子编译

来自分类Dev

使用Webpack公开jquery插件

来自分类Dev

Webpack插件观看子编译

来自分类Dev

Nativescript Angular + Webpack + Onesignal 插件

来自分类Dev

在 webpack 中导入 jQuery 插件

来自分类Dev

Webpack 使用插件数组

来自分类Dev

Webpack插件'html-webpack-plugin'的EJS模板

来自分类Dev

Angular 6. Html Webpack 插件问题

来自分类Dev

Webpack样式适用于较晚

来自分类Dev

Webpack React热加载不适用于子文件夹中的文件

来自分类Dev

Webpack - AngularJS 应用程序不适用于 IE11

来自分类Dev

带有Webpack和Typescript的JQuery插件(数据表)

来自分类Dev

Webpack和browsersync-未定义插件

来自分类Dev

[Webpack的新功能] Webpack清单插件的自动前缀问题

来自分类Dev

Webpack提取文本Webpack插件和CSS加载程序最小化

来自分类Dev

在webpack插件中使用加载程序

来自分类Dev

Webpack在通过插件编译之前添加文件

来自分类Dev

在Webpack插件中添加依赖项