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

时间:2018-02-08 06:35:42

标签: javascript node.js webpack

这是我的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文件。

1 个答案:

答案 0 :(得分:1)

监视模式的工作方式是它只重新编译已更改的文件。这就是为什么通常在监视模式期间未启用散列前缀的原因(因为文件几乎每分钟都会更改,这使得跟踪更改的散列更加复杂等)。换句话说,应该有一个devprod环境,其行为略有不同。

E.g。你需要传递一个参数,参见here如何然后在你的配置文件中使用它们:

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

现在你不需要清理任何东西,因为文件名总是相同的

原始回答

确实如此,它不会运行你的rimraf命令,因为手表发生在webpack内部,因为它不知道你在它之外运行了什么。

使用clean-webpack-plugin就像

一样简单
plugins: [
  new CleanWebpackPlugin('build')
]