Webpack -watch и запуск nodemon?

Ответ 1

Столкнулась с той же проблемой и нашла следующее решение - "webpack-shell-plugin". Это

позволяет запускать любые команды оболочки до или после сборки webpack

Итак, вот мои скрипты в package.json:

"scripts": {
      "clean": "rimraf build",
      "prestart": "npm run clean",
      "start": "webpack --config webpack.client.config.js",
      "poststart": "webpack --watch --config webpack.server.config.js",
}

Если я запустил 'start' script, он запускает следующую последовательность script: clean → start → poststart. И есть часть "webpack.server.config.js":

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

...
if (process.env.NODE_ENV !== 'production') {
    config.plugins.push(new WebpackShellPlugin({onBuildEnd: ['nodemon build/server.js --watch build']}));
}
...

"onBuildEnd" событие срабатывает только один раз после первой сборки, перестройки не являются "onBuildEnd", поэтому nodemon работает как предполагалось

Ответ 2

• Установите следующие зависимости:

npm install npm-run-all webpack nodemon

2. Настройте файл package.json на что-то, как показано ниже:

package.json

{
  ...

  "scripts": {
    "start"        : "npm-run-all --parallel watch:server watch:build",
    "watch:build"  : "webpack --watch",
    "watch:server" : "nodemon \"./dist/index.js\" --watch \"./dist\""
  },

  ...

}

После этого вы можете легко запустить проект, используя npm start.

Не забывайте, что config WatchIgnorePlugin для webpack игнорировать папку ./dist.

Зависимости

• npm-run-all - средство CLI для запуска нескольких npm-скриптов параллельно или последовательно.
• webpack - webpack - это модуль. Его основная цель - объединить файлы JavaScript для использования в браузере, но он также способен преобразовывать, связывать или упаковывать практически любые ресурсы или активы.
• nodemon - Простой монитор script для использования при разработке приложения node.js.

Ответ 3

Мне нравится простота nodemon-webpack-plugin

webpack.config.js

const NodemonPlugin = require('nodemon-webpack-plugin')

module.exports = {
  plugins: [new NodemonPlugin()]
}

затем просто запустите веб-пакет с флагом watch

webpack --watch

Ответ 4

Здесь нет необходимости использовать плагины. Вы можете попробовать запустить несколько экземпляров nodemon, как показано ниже. Попробуйте изменить следующий script для вашего случая использования и посмотрите, работает ли он для вас:

"scripts": {
    "start": "nodemon --ignore './public/' ./bin/www & nodemon --ignore './public/' --exec 'yarn webpack'",
    "webpack": "webpack --config frontend/webpack.config.js"
}

Ответ 5

Вам не нужны плагины для использования webpack и nodemon, просто используйте эти скрипты на своем пакете. json

"scripts": {
  "start": "nodemon --ignore './client/dist' -e js,ejs,html,css --exec 'npm run watch'",
  "watch": "npm run build && node ./server/index.js",
  "build": "rimraf ./client/dist && webpack --bail --progress --profile"
},

Ответ 6

@Ling имеет ответ, очень близкий к правильному. Но это ошибка в первый раз, когда кто-то запускает часы. Для предотвращения ошибок вам необходимо изменить решение.

• Выполнить npm install npm-run-all webpack nodemon

• Создайте файл с именем watch-shim.js в вашем корне. Добавьте следующее содержимое, которое создаст фиктивный файл и каталог, если они отсутствуют.

  var fs = require('fs');
  
  if (!fs.existsSync('./dist')) {
      fs.mkdir('./dist');
      fs.writeFileSync('./dist/bundle.js', '');
  }
  

• Настройте свои сценарии как таковые в package.json. Это будет работать только в том случае, если файл watch-shim.js работает успешно. Тем самым предотвращение сбоя Nodemon из-за отсутствия файлов в первом прогоне.

  {
      ...
      "scripts": {
          "start": "npm run watch",
          "watch": "node watch-shim.js && npm-run-all --parallel watch:server watch:build",
          "watch:build": "webpack --progress --colors --watch",
          "watch:server": "nodemon \"./dist/bundle.js\" --watch \"./dist/*\""
      }
      ...
  },
  

Ответ 7

В дополнение к @Ling хороший ответ:

Если вы хотите полностью построить свой проект, прежде чем смотреть его с помощью nodemon или если у вас есть зависимые сборки (например, server за client), вы можете сделать следующее:

Просто добавьте свой собственный плагин в webpack.config.js и используйте хук компилятора - он удивительно прост, см. Хороший ответ здесь для дальнейших объяснений плагинов. Код плагина запускает nodemon после завершения компиляции webpack.

Пользовательский плагин с done хуком:

const { spawn } = require("child_process")

function InitialBuildActionPlugin() {
  let isInitialBuild = true
  return {
    apply: compiler => {
      compiler.hooks.done.tap("InitialBuildActionPlugin", compilation => {
        if (isInitialBuild) {
          /* 
           * This is the main code. Start nodemon once after the initial build has 
           * finished and not again after a code change (assuming you run webpack
           * in --watch mode). nodemon is included in PATH in this case.
           * Alternatively, invoke it as npm script ('npm run watch')
           */
          isInitialBuild = false
          spawn("nodemon dist/index.js --watch dist", {
            stdio: "inherit",
            shell: true
          })
        }
      })
    }
  }
}

Вы также можете запустить другую сборку веб-пакетов в вашем плагине, например, если у вас есть несколько целевых сборок, таких как electron-main, electron-preload и web (то, откуда я).

webpack.config.js:

  module.exports = {
    ... 
    plugins: [
      ... 
      InitialBuildActionPlugin()
    ]
  })

package.json:

"scripts": {
  "dev"  : "webpack --watch"
  // if you run nodemon as npm script, see above plugin code
  // "watch" : "nodemon dist/index.js --watch dist"
},

Альтернативой является ожидание пакета, но преимущества решения выше:

• вы можете получить доступ к переменным сборки/среды в вашем конфиге веб-пакета
• может быть использована встроенная функциональность webpack
• пакет стороннего производителя не требуется
• нет создания фиктивных файлов

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