当 watch 设置为 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;

从最后一行可以看出，我将 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"
    },
.
.
.

为什么会发生这种情况？

我的目标是：

1. 在更新任何 javascript 文件后更新我编译的 javascript，这样我就不需要每次更改 js 文件时都运行“npm run build”。

2. 清理旧的 javascript“散列”文件，该文件由“rimraf”处理，但由于某种原因，它不会在监视模式下清理新的散列 javascript 文件。

Answer 1

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

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

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

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

原答案

它会执行，并且不会运行您的 rimraf 命令，因为监视发生在 webpack 内部，并且它不知道您在其外部运行了什么。

使用clean-webpack-plugin非常简单

plugins: [
  new CleanWebpackPlugin('build')
]