Подтвердить что ты не робот

Запустить команду после сборки webpack

Я хочу запустить webpack в режиме --watch и запустить команду оболочки после каждой сборки, которая синхронизирует папку с другой.

Я нашел этот плагин, который запускает событие после каждой сборки. Это работает, но последний фрагмент головоломки - вызвать команду оболочки (для синхронизации) из Javascript. Любые указатели на то, как достичь этого, очень ценятся.

4b9b3361

Ответ 1

Вы можете легко запустить любую команду оболочки со встроенным модулем child_process. Также вы можете попробовать некоторые библиотеки оболочки для node.js, например Shell.js. Оборачивает большую часть оболочки по умолчанию для более удобного использования

Ответ 2

Webpack 4

На сегодняшний день (11 апреля 2018 г.) большинство плагинов, которые я пробовал, используют устаревший API, что приводит к следующему предупреждению:

DeprecationWarning: Tapable.plugin is deprecated. Use new API on '.hooks' instead

Мне было приятно узнать, что вы можете легко написать специальный плагин для веб-пакетов.

В вашем файле webpack.config.js:

const exec = require('child_process').exec;

module.exports = {

  // ... other config here ...

  plugins: [

    // ... other plugins here ...

    {
      apply: (compiler) => {
        compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
          exec('<path to your post-build script here>', (err, stdout, stderr) => {
            if (stdout) process.stdout.write(stdout);
            if (stderr) process.stderr.write(stderr);
          });
        });
      }
    }
  ]
};

Если вы предпочитаете использовать spawn для получения в реальном времени или "живых" данных из вашего сценария, это иллюстрирует основное использование:

const spawn = require('child_process').spawn;

const child = spawn('<your script here>');
child.stdout.on('data', function (data) {
    process.stdout.write(data);
});
child.stderr.on('data', function (data) {
    process.stderr.write(data);
});

Ответ 3

Мне также понадобилась такая вещь, поэтому я скомпилировал супер простой плагин для выполнения команд оболочки до и после каждой сборки.

'use strict';

var exec = require('child_process').exec;

function puts(error, stdout, stderr) {
    console.log(stdout);
}

function WebpackShellPlugin(options) {
  var defaultOptions = {
    onBuildStart: [],
    onBuildEnd: []
  };

  this.options = Object.assign(defaultOptions, options);
}

WebpackShellPlugin.prototype.apply = function(compiler) {
  const options = this.options;

  compiler.plugin("compilation", compilation => {
    if(options.onBuildStart.length){
        console.log("Executing pre-build scripts");
        options.onBuildStart.forEach(script => exec(script, puts));
    }
  });

  compiler.plugin("emit", (compilation, callback) => {
    if(options.onBuildEnd.length){
        console.log("Executing post-build scripts");
        options.onBuildEnd.forEach(script => exec(script, puts));
    }
    callback();
  });
};

module.exports = WebpackShellPlugin;

то в вашей конфигурации webpack:

plugins: [
    new WebpackShellPlugin({ 
         onBuildStart: ['echo "hello world"'], 
         onBuildEnd: ['echo "goodbye world"'] 
    })
]

Это супер базовый и не поддерживает асинхронные скрипты. но он работает. не стесняйтесь изменять, но вы сочтете нужным.

Рассмотрим этот код под лицензией MIT.

Требуется node 4.x и до запуска, так как здесь я использую некоторые функции es6.

Ответ 4

Используйте webpack-shell-plugin

Как пользоваться:

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


    module.exports = {
      ...
      ...
      plugins: [
        new WebpackShellPlugin({onBuildStart:['echo "Webpack Start"'], onBuildEnd:['echo "Webpack End"']})
      ],
      ...
    }

Ответ 5

Если вы хотите сделать это, когда изменится конкретный файл, вы можете использовать этот маленький плагин, который я построил: https://www.npmjs.com/package/webpack-noodle-plugin p >

Надеюсь, что это поможет

Ответ 6

По сути, вы можете подключиться к компилятору на разных этапах всей компиляции, на стадии выделения ресурсов и т.д. И запускать свой собственный скрипт или код по своему усмотрению.

Мне нравится делать это так -

class CustomPlugin {
  constructor(name, command, stage = 'afterEmit') {
    this.name = name;
    this.command = command;
    this.stage = stage;
  }

  static execHandler(err, stdout, stderr) {
    if (stdout) process.stdout.write(stdout);
    if (stderr) process.stderr.write(stderr);
  }

  apply(compiler) {
    compiler.hooks[this.stage].tap(this.name, () => {
      exec(this.command, CustomPlugin.execHandler);
    });
  }
}

а затем использовать его так

new CustomPlugin('RunTest', 'jest', 'beforeRun'),