Как в webpack запускать npm скрипты?

В Webpack можно запускать npm скрипты с помощью различных подходов. Ниже я рассмотрю два основных способа.

1. Использование npm команды в конфигурационном файле:
В файле webpack.config.js, который является конфигурационным файлом для Webpack, вы можете использовать child_process модуль Node.js для запуска npm скриптов. Например, если у вас есть скрипт с именем dev в секции scripts в файле package.json, вы можете запустить его в конфигурационном файле следующим образом:

   const { exec } = require('child_process');
   
   module.exports = {
     // ...конфигурация Webpack...
     plugins: [
       // ...плагины Webpack...
     ],
     devServer: {
       before: () => {
         exec('npm run dev', (error, stdout, stderr) => {
           if (error) {
             console.error(`exec error: ${error}`);
             return;
           }
           console.log(`stdout: ${stdout}`);
           console.error(`stderr: ${stderr}`);
         });
       },
     },
   };

В этом примере, при запуске dev-сервера Webpack, будет запущен скрипт dev из package.json. Вы также можете использовать этот подход в других частях конфигурации Webpack, где вам необходимо запустить npm скрипты.

2. Использование плагина npm-run-webpack-plugin:
Этот плагин предоставляет простой способ запуска npm скриптов прямо из конфигурации Webpack. Установите плагин с помощью npm команды npm install --save-dev npm-run-webpack-plugin, а затем используйте его в конфигурации следующим образом:

   const NpmRunWebpackPlugin = require('npm-run-webpack-plugin');
   
   module.exports = {
     // ...конфигурация Webpack...
     plugins: [
       new NpmRunWebpackPlugin(),
       // ...плагины Webpack...
     ],
   };

В этом примере плагин будет запускать npm скрипты, указанные в секции scripts в файле package.json, в определенных точках жизненного цикла сборки Webpack. Вы можете указать точки запуска скриптов с помощью свойств плагина. Например:

   const NpmRunWebpackPlugin = require('npm-run-webpack-plugin');
   
   module.exports = {
     // ...конфигурация Webpack...
     plugins: [
       new NpmRunWebpackPlugin({
         dev: 'npm run dev',
         build: 'npm run build',
       }),
       // ...плагины Webpack...
     ],
   };

В этом примере скрипт npm run dev будет запущен перед сборкой в режиме разработки, а скрипт npm run build будет запущен перед сборкой в режиме продакшн.

Оба этих подхода позволяют запускать npm скрипты в нужные моменты в жизненном цикле сборки Webpack. Вы можете выбрать подход, который лучше всего соответствует вашим потребностям и предпочтениям.