Webpack doesn't run clean when watch is set to true

Question

This is my webpack.config.js file:

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;

As you can tell from the last line I'm setting the watch option to true. In addition, I'm using chunkhash to generates a new javascript file when I make a change to any of my javascript files. However, it is not running my rinraf clean command when the watch option is set to 'true'.

Here is a portion of my package.json file that:

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

Why is this happening?

My goal is to:

1. Have my compiled javascript be updated after I update any of my javascript files, so I don't need to run 'npm run build' every single time I make a change to my js files.

2. Clean the old javascript 'hashed' file which used be taken care of by 'rimraf' but for some reason it isn't cleaning the new hashed javascript files in watch mode.

Answer 1

The watch mode works in a way that it only recompiles the files that were changed. That's why, normally, during the watch mode the hash prefixes are not enabled (because the files are changed nearly every minute which makes it more complicated to track the changed hashes etc). In other words one should have a dev and prod environments that will behave slightly differently.

E.g. you need to pass an argument, see here how and then use them in your config file:

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

Now you will not need to clean anything because the filenames are always the same

Original answer

It does and it will not run your rimraf command because the watch happens inside of the webpack ind it has no idea what you did run outside of it.

Use clean-webpack-plugin which is as easy as

plugins: [
  new CleanWebpackPlugin('build')
]