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

Question

我的现状

现在我用的是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 的官方文档中找不到任何指导。

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 documentation应该在某处为您的用例提供正确的 hook。

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