当手表设置为 true 时，Webpack 不会干净运行

Question

这是我的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;

您可以从最后一行中分辨出我将手表选项设置为true。此外，当我更改任何JavaScript文件时，我正在使用Chunkhash来生成新的JavaScript文件。但是，当手表选项设置为" true"时，它没有运行我的rinraf Clean命令。

这是我的软件包的一部分。JSON文件：

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

为什么会发生这种情况？

我的目标是：

1. 更新我的任何JavaScript文件后，是否要更新我的编译JavaScript，因此我不需要每次更改JS文件时运行'NPM Run build''。

   。

2. 清洁旧的javascript'hashed'文件，该文件由'rimraf'照顾，但由于某种原因，它没有在观察模式下清洁新的Hashed JavaScript文件。

Answer 1

手表模式以一种仅重新编译已更改的文件的方式工作。这就是为什么通常在手表模式下未启用哈希前缀的原因(因为几乎每分钟更改了文件，这使跟踪更改的哈西斯等变得更加复杂(。换句话说，应该有一个dev和prod环境的行为会有所不同。

例如。您需要通过参数，请参阅此处的方式，然后在配置文件中使用它们：

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

现在您不需要清洁任何东西，因为文件名总是相同的

原始答案

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

使用清洁webpack-plugin，就像

一样容易

plugins: [
  new CleanWebpackPlugin('build')
]

Answer 2

我经历了与/assets/文件夹中的资产相同的问题，而在启用output.clean时未重建。

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

output: {
  clean: {
    keep: /assets//,
  },
},