主要问题是,当watch在源文件中检测到更改并重新编译时,它陷入了循环,因为它更新了index.php
页面,在该页面中,我将已编译的javascript插入到元素中(通过HtmlWebpackPlugin)。我尝试忽略index.php文件所在的watchOptions
目录中的所有内容(位于配置文件中的build_app
中),并明确忽略了该文件,但它似乎仍然卡在此重建循环中,因为它检测到该文件中的更改。
我尝试使用TimeFixPlugin似乎对某些人有所帮助,而我正在使用此WatchRunPlugin是在另一个StackOverflow问题中创建的人来调试webpack --watch
检测到哪些文件被更改,但它没有似乎没有帮助。
-watch检测到我的第一个更改的文件时输出(注意,编译完成后,当通过HtmlWebpackPlugin将新的.js脚本添加到索引页时,它检测到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/**' ] }
谢谢您的指导。
主要问题是,当watch在源文件中检测到更改并重新编译时,它陷入了循环,因为它已经更新了index.php页面,我在其中插入了已编译的javascript ...]]
所以,这部分是由于我当前正在Grunt和Webpack之间进行转换,所以我不得不让HtmlWebpackPlugin
查看模板并将输出的index.php
文件输出到同一目录中(发生了与我的Webpack output.path
在配置目录中)。另外,我还没有意识到,但这也导致新的编译脚本被添加到index.php页面,而没有删除以前的脚本。
[仍不确定为什么它没有忽略我明确告诉它忽略的文件,但我通过更改旧的Grunt配置将索引文件构建到build_app_tmp
目录而不是最终的build_app
中来解决了该问题。目录(即webpack输出目录),然后将HtmlWebpackPlugin
配置为使用build_app_tmp
目录查找模板。