我的现状
现在我用的是vue-cli@3.9.2。出于某种原因,我需要使用 vue-cli-service build --watch
查看源代码的文件更改以运行 webpack 的构建。
我目前的解决方案
目前,我运行另一个 Node.js 进程来观察 webpack 包的文件变化。这段糟糕的开发经历让我深受其害。
与vue-cli 2.x对比
当我使用 vue-cli 2.x 时,我实际上在 build/build.js
中运行了 webpack()
,一个 webpack 的原生 API,所以我可以使用 webpack().watch()
来运行构建并将我自己的脚本作为回调函数传递。然而,在 vue-cli 3.x 中,据我所知,没有办法也没有必要使用 webpack 的原生 API。
总结
我希望在 webpack 的每次自动构建之后运行我自己的脚本,尽管我在 vue-cli 的官方文档中找不到任何指导。
最佳答案
据我了解 - 您有一个 Webpack 插件用例。就像例如webpack-build-notifier重建后发送通知。
我不是 Webpack 插件作者,但这已经为我工作了:
// vue.config.js
const ArbitraryCodeAfterReload = function(cb) {
this.apply = function(compiler) {
if (compiler.hooks && compiler.hooks.done) {
compiler.hooks.done.tap('webpack-arbitrary-code', cb);
}
};
};
const myCallback = function() {
console.log('Implementing alien intelligence');
};
const plugins = [];
const isDev = process.env.NODE_ENV === 'development';
if (isDev) {
plugins.push(new ArbitraryCodeAfterReload(myCallback));
}
module.exports = {
configureWebpack: {
plugins
}
};
如果这不是正确的编译步骤 - Webpack documentation应该在某处为您的用例提供正确的 hook
。
也许已经有一个插件可以满足您的需求...
关于javascript - 如何在 vue-cli 3.x 的监视模式下每次 webpack 自动构建后执行我自己的脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58325548/