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

阵列黄

我目前的情况

现在我正在使用[email protected]。出于某种原因，我需要使用监视源代码的文件更改以运行webpack的构建vue-cli-service build --watch。

我目前的解决方案

当前，我运行另一个Node.js进程来监视webpack捆绑包中的文件更改。我真的遭受了如此糟糕的开发经验。

与vue-cli 2.x进行比较

当我使用vue-cli 2.x时，我实际上在中运行webpack()了webpack的一个本机API build/build.js，因此我可以改用webpack().watch()运行build并将自己的脚本作为回调函数传递。但是，在我所知的范围内，在vue-cli 3.x中，没有办法也不需要使用Webpack的本机API。

概要

尽管在vue-cli的官方文档中找不到任何指导，但我希望在webpack的每次自动构建后都运行自己的脚本。

疯狂流

据我了解-您有一个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适合您的用例的权利。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。