Как выполнить мой собственный скрипт после автоматической сборки каждого веб-пакета в режиме просмотра vue-cli 3.x?

Question

Моя текущая ситуация

Теперь я использую vue-cli@3.9.2. По какой-то причине мне нужно наблюдать за изменением файла моего исходного кода, чтобы запустить сборку веб-пакета, с vue-cli-service build --watch.

Мое текущее решение

В настоящее время я запускаю другой процесс Node.js для просмотраизменение файла, пакета webpack. Я действительно страдал от этого ужасного опыта разработки.

Сравните с vue-cli 2.x

Когда я использовал vue-cli 2.x, я фактически запускаю webpack(), один собственный API-интерфейсwebpack, в build/build.js, поэтому я мог бы вместо этого использовать webpack().watch(), чтобы запустить сборку и передать свой собственный скрипт в качестве функции обратного вызова. Однако в vue-cli 3.x, насколько мне известно, нет никакого способа и нет необходимости обращаться к собственному API веб-пакета.

Резюме

Я хочу запускать свой собственный скрипт после каждого автоматического обновления веб-пакетаbuild, хотя я не смог найти никаких указаний в официальном документе 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: ['']
})