当 watch 设置为 true 时，Webpack 运行不干净

Posted 2023-03-08

【中文标题】当 watch 设置为 true 时，Webpack 运行不干净

【英文标题】：Webpack doesn't run clean when watch is set to true

【发布时间】：2018-07-18 15:28:00

【问题描述】：

这是我的 webpack.config.js 文件：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

const config = 
    entry: 
        bundle: './javascript/index.js'
    ,
    output: 
        path: path.resolve(__dirname, 'build'),
        filename: '[name].[chunkhash].js'
    ,
    module: 
        rules: [
            
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            ,
            
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                    fallback: "style-loader",
                    use: "css-loader"
                )
            ,
            
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    
                        loader: 'url-loader',
                        options: 
                            limit: 40000
                        
                    ,
                    'image-webpack-loader'
                ]
            
        ]
    ,
    plugins: [
        new ExtractTextPlugin('style.css'),
        new HtmlWebpackPlugin(
            template: 'src/index.html'
        )
    ],
    watch: true
;

module.exports = config;

从最后一行可以看出，我将 watch 选项设置为 true。此外，当我对我的任何 javascript 文件进行更改时，我正在使用 chunkhash 生成一个新的 javascript 文件。但是，当 watch 选项设置为“true”时，它不会运行我的 rinraf clean 命令。

这是我的 package.json 文件的一部分：

    "name": "budgety",
    "version": "1.0.0",
    "description": "Budget app",
    "main": "app.js",
    "scripts": 
      "clean": "rimraf build",
      "build": "npm run clean && webpack"
    ,
.
.
.

为什么会这样？

我的目标是：

在我更新我的任何 javascript 文件后更新我编译的 javascript，因此我不需要每次对我的 js 文件进行更改时都运行“npm run build”。

清理以前由 'rimraf' 处理的旧 javascript 'hashed' 文件，但由于某种原因，它没有在 watch 模式下清理新的 hashed javascript 文件。

【参考方案1】：

监视模式的工作方式是只重新编译已更改的文件。这就是为什么通常在监视模式期间不启用哈希前缀的原因（因为文件几乎每分钟都在更改，这使得跟踪更改的哈希等变得更加复杂）。换句话说，应该有一个dev 和prod 环境，它们的行为会略有不同。

例如您需要传递一个参数，请参阅here 如何然后在您的配置文件中使用它们：

 filename: env.withHashPrefixes ? '[name].[chunkhash].js' : '[name].js'

现在您无需清理任何内容，因为文件名始终相同

原答案

它会运行并且它不会运行你的 rimraf 命令，因为手表发生在 webpack 内部，它不知道你在它之外运行了什么。

使用clean-webpack-plugin，就这么简单

plugins: [
  new CleanWebpackPlugin('build')
]

【讨论】：

所以这有点工作。我使用 watch 选项并将其设置为 true，但它正在删除此文件夹中的所有图像。

这不应该是因为...？

对不起，我不明白你的评论。此外，如果我不添加 watch 选项，它不会删除旧的散列 javascript 文件。手表效果很好。它会删除旧文件，但不知道为什么要删除已编译的图像。

啊，更新了答案。清洁不是这里最好的方法

【参考方案2】：

我遇到了同样的问题，在启用output.clean 时，我在/assets/ 文件夹中的资产被清理并且没有重建。

我已经通过在 webpack.config.js 的清理中忽略 /assets/ 来解决此问题。但是，这不是完美的解决方案，因为过时的资产会保留在文件夹中。

output: 
  clean: 
    keep: /assets\//,
  ,
,