webpack --watch 不会忽略文件
webpack --watch is not ignoring files
主要问题是,当 watch 检测到源文件中的更改并重新编译时,它会陷入循环,因为它更新了 index.php
页面,我在其中插入了已编译的 javascript 到元素中(通过 HtmlWebpackPlugin)。我已经尝试忽略 index.php 文件所在的 build_app
目录中的所有内容(在我的配置文件中的 watchOptions
中),以及明确忽略该文件,它似乎仍然得到卡在这个重建循环中,因为它检测到该文件中的更改。
我试过使用 TimeFixPlugin which seemed to help some people, and I'm using this 某人在另一个 Whosebug 问题中创建的来调试检测到哪些文件已被 webpack --watch
更改,但它似乎没有帮助。
当 --watch 检测到我的第一个更改文件时的输出(注意,当编译完成时,当新的 .js 脚本通过 HtmlWebpackPlugin 添加到索引页面时,它检测到 index.php
中的另一个更改:
====================================
NEW BUILD FILES CHANGED:
/Users/blah/project1/src/common/services/AuthService/AuthService.class.js
====================================
Compilation starting…
Compilation finished
Hash: b90fb62dff8c1a7732e0
Version: webpack 4.42.0
Time: 375ms
Built at: 03/26/2020 1:47:11 PM
Asset Size Chunks Chunk Names
assets/js/app.b90fb62dff8c1a7732e0.js 736 KiB app [emitted] [immutable] app
index.php 76.6 KiB [emitted]
+ 1 hidden asset
Entrypoint app = assets/js/vendors.6828eff62e21c38585ce.js assets/js/app.b90fb62dff8c1a7732e0.js
[./src/common/services/AuthService/AuthService.class.js] 9.76 KiB {app} [built]
+ 36 hidden modules
Child html-webpack-plugin for "index.php":
1 asset
Entrypoint undefined = index.php
[./node_modules/html-webpack-plugin/lib/loader.js!./build_app/index.php] 77.9 KiB {1} [built]
+ 3 hidden modules
====================================
NEW BUILD FILES CHANGED:
/Users/blah/project1/build_app/index.php
====================================
webpack.config.js(位于 /Users/blah/project1
,与我 运行 webpack 命令所在的同一目录):
mode: 'development',
plugins: [
new TimeFixPlugin(),
new WatchRunPlugin(),
// Clean build_app folder
new CleanWebpackPlugin(['build_app_webpack'], {
// Write logs to console.
verbose: true,
// perform clean just before files are emitted to the output dir
// Default: false
beforeEmit: true
}),
// Create our index.php file
new HtmlWebpackPlugin({
template: './build_app/index.php',
filename: 'index.php',
inject: 'head', // place scripts in head because we bootstrap the app at the end of the body
hash: true, // cache busting helper
templateParameters: {
LR_VERSION: gitRevisionPlugin.version(),
LR_HASH: gitRevisionPlugin.commithash()
}
}),
// Expose _ (underscoreJS) to the global JavaScript scope
new webpack.ProvidePlugin({
_: 'underscore'
})
],
watchOptions: {
ignored: [
'bin_*/**',
'build_*/**',
'build_app/index.php',
'karma/html-output/**',
'jest/coverage/**',
'jest/test-results/**',
'node_modules/**',
'vendor/**'
]
}
提前感谢您的指导。
所以,这部分是由于我目前正在 Grunt 和 Webpack 之间转换,所以我必须 HtmlWebpackPlugin
查看模板并输出生成的 index.php
文件在同一目录中(恰好与配置中的 webpack output.path
相同的目录)。此外,我还没有意识到,但这也导致新编译的脚本被添加到 index.php 页面而不删除以前的脚本。
仍然不确定为什么它没有忽略我明确告诉它要忽略的文件,但我通过更改我的旧 Grunt 配置将索引文件构建到 build_app_tmp
目录而不是最后的 build_app
目录(即 webpack 输出目录),然后我配置 HtmlWebpackPlugin
使用 build_app_tmp
目录来查找模板。
这也让我可以查看 build_app_tmp
目录,了解 Grunt 可能对 index.php
文件所做的任何更改。
主要问题是,当 watch 检测到源文件中的更改并重新编译时,它会陷入循环,因为它更新了 index.php
页面,我在其中插入了已编译的 javascript 到元素中(通过 HtmlWebpackPlugin)。我已经尝试忽略 index.php 文件所在的 build_app
目录中的所有内容(在我的配置文件中的 watchOptions
中),以及明确忽略该文件,它似乎仍然得到卡在这个重建循环中,因为它检测到该文件中的更改。
我试过使用 TimeFixPlugin which seemed to help some people, and I'm using this webpack --watch
更改,但它似乎没有帮助。
当 --watch 检测到我的第一个更改文件时的输出(注意,当编译完成时,当新的 .js 脚本通过 HtmlWebpackPlugin 添加到索引页面时,它检测到 index.php
中的另一个更改:
====================================
NEW BUILD FILES CHANGED:
/Users/blah/project1/src/common/services/AuthService/AuthService.class.js
====================================
Compilation starting…
Compilation finished
Hash: b90fb62dff8c1a7732e0
Version: webpack 4.42.0
Time: 375ms
Built at: 03/26/2020 1:47:11 PM
Asset Size Chunks Chunk Names
assets/js/app.b90fb62dff8c1a7732e0.js 736 KiB app [emitted] [immutable] app
index.php 76.6 KiB [emitted]
+ 1 hidden asset
Entrypoint app = assets/js/vendors.6828eff62e21c38585ce.js assets/js/app.b90fb62dff8c1a7732e0.js
[./src/common/services/AuthService/AuthService.class.js] 9.76 KiB {app} [built]
+ 36 hidden modules
Child html-webpack-plugin for "index.php":
1 asset
Entrypoint undefined = index.php
[./node_modules/html-webpack-plugin/lib/loader.js!./build_app/index.php] 77.9 KiB {1} [built]
+ 3 hidden modules
====================================
NEW BUILD FILES CHANGED:
/Users/blah/project1/build_app/index.php
====================================
webpack.config.js(位于 /Users/blah/project1
,与我 运行 webpack 命令所在的同一目录):
mode: 'development',
plugins: [
new TimeFixPlugin(),
new WatchRunPlugin(),
// Clean build_app folder
new CleanWebpackPlugin(['build_app_webpack'], {
// Write logs to console.
verbose: true,
// perform clean just before files are emitted to the output dir
// Default: false
beforeEmit: true
}),
// Create our index.php file
new HtmlWebpackPlugin({
template: './build_app/index.php',
filename: 'index.php',
inject: 'head', // place scripts in head because we bootstrap the app at the end of the body
hash: true, // cache busting helper
templateParameters: {
LR_VERSION: gitRevisionPlugin.version(),
LR_HASH: gitRevisionPlugin.commithash()
}
}),
// Expose _ (underscoreJS) to the global JavaScript scope
new webpack.ProvidePlugin({
_: 'underscore'
})
],
watchOptions: {
ignored: [
'bin_*/**',
'build_*/**',
'build_app/index.php',
'karma/html-output/**',
'jest/coverage/**',
'jest/test-results/**',
'node_modules/**',
'vendor/**'
]
}
提前感谢您的指导。
所以,这部分是由于我目前正在 Grunt 和 Webpack 之间转换,所以我必须 HtmlWebpackPlugin
查看模板并输出生成的 index.php
文件在同一目录中(恰好与配置中的 webpack output.path
相同的目录)。此外,我还没有意识到,但这也导致新编译的脚本被添加到 index.php 页面而不删除以前的脚本。
仍然不确定为什么它没有忽略我明确告诉它要忽略的文件,但我通过更改我的旧 Grunt 配置将索引文件构建到 build_app_tmp
目录而不是最后的 build_app
目录(即 webpack 输出目录),然后我配置 HtmlWebpackPlugin
使用 build_app_tmp
目录来查找模板。
这也让我可以查看 build_app_tmp
目录,了解 Grunt 可能对 index.php
文件所做的任何更改。