Webpack-смотреть и запускать nodemon?

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

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

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

19
browser-sync node.js nodemon webpack

6 ответов

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

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

Итак, это мои скрипты в пакете.в JSON:

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

Если я запускаю сценарий "пуск", он запускает следующую последовательность сценариев: clean -> start -> poststart. И есть часть ' webpack.сервер.конфиг.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 работы

18
  1. установить следующие зависимости:

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 папка.

зависимости

  1. npm-run-all - инструмент CLI для запуска несколько npm-скриптов параллельно или последовательно.
  2. webpack - webpack модуль пакетирования. Его основная цель-связывать файлы JavaScript для использования в браузере, но он также способен преобразовывать, связывать или упаковывать практически любой ресурс или актив.
  3. nodemon - простой скрипт монитора для использования при разработке узла.приложение на JS.
35

мне нравится простота nodemon-webpack-плагин

webpack.конфиг.js

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

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

затем просто запустите webpack с помощью watch флаг

webpack --watch
5

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

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

вам не нужны плагины для использования 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"
},
0

@Ling имеет ответ, очень близкий к правильному. Но это ошибки при первом запуске watch. Вам нужно будет изменить решение, чтобы предотвратить ошибки.

  1. выполнить npm install npm-run-all webpack nodemon

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

    var fs = require('fs');

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

  3. Настройте свои скрипты так, как в package.json. Это будет работать только если смотреть the 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/*\""
    }
    ...
},
0