如何在 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 时，我实际上运行webpack()了 webpack 的一个原生 API in build/build.js，因此我可以使用它webpack().watch()来运行 build 并将我自己的脚本作为回调函数传递。然而，在 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适合您的用例。

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