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

Благодаря отличному ответу от @McMath теперь у меня есть webpack, который компилирует мой клиент и мой сервер. Я теперь пытаюсь сделать webpack --watch полезным. В идеале я бы хотел, чтобы у него появилось что-то вроде nodemon для моего серверного процесса, когда этот пакет изменился, и некоторый аромат браузера для моего клиента.

Я понимаю, что это поставщик/загрузчик, а не задающий задачи, но есть ли способ сделать это? Отсутствие результатов google, кажется, указывает, что я пытаюсь что-то новое, но это, должно быть, уже было сделано.

Я могу всегда иметь пакет webpack в другой каталог и использовать gulp, чтобы посмотреть его/скопировать его /browsersync -ify, но это похоже на взлома.. Есть ли лучший способ?

ОТВЕТЫ

Ответ 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

  1. Настройте файл 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
  • пакет стороннего производителя не требуется
  • нет создания фиктивных файлов

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