如何在 vue-cli 3.x 的监视模式下每个 webpack 自动构建后执行我自己的脚本？

Question

我目前的情况

现在我正在使用 vue-cli@3.9.2。出于某种原因，我需要观察源代码的文件更改以运行 webpack 的构建，vue-cli-service build --watch.

我当前的解决方案

目前，我运行另一个 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 的官方文档中找不到任何指导。

Answer 1

据我了解 - 你有一个 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 文档应该在某个地方为您的用例提供正确的hook。

也许已经有一个可用的插件已经可以满足您的需求......

Answer 2

也许这可以帮助你。这只是一个例子。您只需要使用&&

npm run start && npm run build

因此，在 npm 运行启动脚本执行后，您的 npm 运行构建脚本将在第一个脚本之后运行

更新你可以使用这个包 webpack-shell-plugin

const WebpackShellPlugin = require('webpack-shell-plugin');
new WebpackShellPlugin({
onBuildStart: [''],
onBuildEnd: ['']
})