这是我的 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”。
清理旧的 javascript“散列”文件,该文件过去由“rimraf”处理,但出于某种原因,它不会在监视模式下清理新的散列 javascript 文件。
最佳答案
watch 模式的工作方式是它只重新编译被更改的文件。这就是为什么通常情况下,在监视模式下哈希前缀未启用(因为文件几乎每分钟都会更改,这使得跟踪更改的哈希等变得更加复杂)。换句话说,应该有一个行为略有不同的 dev
和 prod
环境。
例如您需要传递一个参数,请参阅 here如何在您的配置文件中使用它们:
filename: env.withHashPrefixes ? '[name].[chunkhash].js' : '[name].js'
现在你不需要清理任何东西,因为文件名总是一样的
原始答案
它会执行并且不会运行您的 rimraf 命令,因为监视发生在 webpack 内部,而且它不知道您在外部运行了什么。
使用clean-webpack-plugin这很容易
plugins: [
new CleanWebpackPlugin('build')
]
关于javascript - 当 watch 设置为 true 时,Webpack 运行不干净,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48679073/