在 vue-cli 3.x 的 watch 模式下每個 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() ，一個原生 API 的 webpack ，所以我可以使用webpack().watch()來運行構建並傳遞我自己的腳本作為回調 function。 但是在 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 運行構建腳本將在第一個之后運行

更新你可以使用這個 package webpack-shell-plugin

const WebpackShellPlugin = require('webpack-shell-plugin');

new WebpackShellPlugin({
  onBuildStart: [''],
  onBuildEnd: ['']
})