javascript - Webpack:无限循环和自动生成的文件
问题描述
我有一个生成文件的脚本,调用它auto.js
。该文件包含一些动态生成的导入,并在 VueJS 项目中使用。
// auto.js
import { apple, strawberry, orange } from 'delicious-fruits';
import { carrot, cucumber, celery } from 'delicious-vegetables';
在使用 Webpacks dev server时,如果任何项目文件发生更改,我的目标是让这个脚本重新生成我的auto.js
文件,然后将其包含在重新编译的项目中。
我已经把这个脚本变成了一个 Webpack 插件,我正在监听watchRun
compiler hook。根据它的描述,这似乎是一个理想的钩子:
在触发新编译后但在实际开始编译之前在监视模式下执行插件。
class AutoGenerate {
constructor(options) {
this.options = options;
}
apply(compiler) {
compiler.hooks.watchRun.tap('AutoGenerate', () => {
generateFile()
})
}
}
function generateFile () {
// generate auto.js and write to disk
}
我总是以无限循环的情况结束。我尝试通过使用各种生命周期事件(挂钩)以及忽略自动生成的文件来解决问题。当然,忽略它,这些更改不会包含在重新编译的项目中。
const webpack = require('webpack');
const AutoGenerate = require("./auto.plugin");
module.exports = {
configureWebpack: {
plugins: [
new webpack.WatchIgnorePlugin([/.*auto\.js/]),
new AutoGenerate()
]
}
}
我也尝试过利用编译,并在编译中添加新资产。虽然该过程不会出错,但生成的资产不是最终编译的一部分。
// auto.plugin.js
class AutoGenerate {
static defaultOptions = {
outputFile: 'auto.js',
};
constructor(options = {}) {
this.options = { ...AutoGenerate.defaultOptions, ...options };
}
apply(compiler) {
compiler.hooks.thisCompilation.tap('AutoGenerate', (compilation) => {
const path = require("path")
const filePath = path.resolve(__dirname, `src/plugins/${this.options.outputFile}`)
const { RawSource } = require('webpack-sources')
const fileContent = new RawSource(generateFile())
compilation.emitAsset(
filePath,
fileContent
)
});
}
}
function generateFile() {
// generate file content & return as string
}
module.exports = { AutoGenerate };
// vue.config.js
const AutoGenerate = require("./auto.plugin");
module.exports = {
configureWebpack: {
plugins: [
new AutoGenerate()
]
}
}
如何触发自动生成此文件的逻辑,同时将此文件作为任何重新编译的一部分包含在内,同时避免无限循环?
解决方案
我无法确定上述问题的直接解决方案。然而,对于任何阅读的人,我发现这可以通过使用一个名为 的包来完成before-build-webpack
,特别是通过包含watch-run
触发器。
// vue.config.js
const WebpackBeforeBuildPlugin = require('before-build-webpack')
module.exports = {
configureWebpack: {
plugins: [
new WebpackBeforeBuildPlugin(function(stats, callback) {
// ...
}, ['run', 'watch-run'])
]
}
}
推荐阅读
- r - 基于值滚动应用
- python-3.x - 在 pyinstaller 生成的 .exe 中动态导入自生成的 python 文件
- angular - ngrx:如何将参数传递给 createSelector 方法中的选择器
- python - 在 jupyter 笔记本中使用 %%prun 单元魔法的单元格中的时间线?
- node.js - 查询数据库时 express.js 中的内存泄漏
- sql - 使用 Linq-to-SQL 插入,其中 IDENTITY_INSERT 设置为 OFF
- javascript - Puppeteer 点击按钮未执行
- jenkins - 配置 Kerberos 身份验证以运行 Impala 查询,作为 Jenkins 构建中测试自动化的一部分
- reactjs - 带有反应的字体真棒,如何显示作为道具传递的图标
- c# - .NET Exif 信息在生产服务器上不起作用