web-dev-qa-db-ja.com

Webpack-nodemonを監視して起動しますか？

@ -McMathによる 優秀な回答 のおかげで、クライアントとサーバーの両方をコンパイルするwebpackができました。私は今webpack --watch 役に立つ。理想的には、そのバンドルが変更されたときにサーバープロセスのnodemonのようなものを生成し、クライアントが変更されたときにbrowsersyncのフレーバーを生成したいです。

私はそれがバンドラー/ローダーであり、実際にはタスクランナーではないことを理解していますが、これを達成する方法はありますか？グーグルの結果の欠如は、私が何か新しいことを試みていることを示しているようですが、これはすでに行われているに違いありません。

私はいつでも別のディレクトリにwebpackパッケージを持ち、gulpを使用してそれを見る/コピーする/ブラウザ同期化することができますが、それはハックのように思えます。より良い方法はありますか？

node.jswebpackbrowser-syncnodemon
29
XeroxDucati

同じ問題に直面し、次の解決策を見つけました-「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'スクリプトを実行すると、次のスクリプトシーケンスが起動します：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は意図したとおりに動作します

23
Jonik
  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を使用してプロジェクトを簡単に実行できます。

./distフォルダーを無視するwebpackのWatchIgnorePluginの設定を忘れないでください。

依存関係

  1. npm-run-all-複数のnpm-scriptsを並列または順次実行するCLIツール。
  2. webpack-webpackはモジュールバンドラーです。その主な目的は、ブラウザで使用するためにJavaScriptファイルをバンドルすることですが、ほぼすべてのリソースまたはアセットを変換、バンドル、またはパッケージ化することもできます。
  3. nodemon-node.jsアプリの開発中に使用するシンプルなモニタースクリプト。
51
Ling

nodemon-webpack-plugin のシンプルさが好き

webpack.config.js

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

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

watchフラグを指定してwebpackを実行するだけです

webpack --watch
12
galki

ここでプラグインを使用する必要はありません。以下のように複数のnodemonインスタンスを実行してみてください。ユースケースに合わせて次のスクリプトを変更してみて、それが適切かどうかを確認してください。

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

@Lingの良い答えに加えて：

プロジェクトを一度ビルドしたい場合、nodemonで見る前に、webpack compiler hook を使用できます。プラグインのコードは、webpackがコンパイルを完了した後、nodemonフックでdoneをトリガーします（この便利な post も参照）。

const { spawn } = require("child_process")

function OnFirstBuildDonePlugin() {
  let isInitialBuild = true
  return {
    apply: compiler => {
      compiler.hooks.done.tap("OnFirstBuildDonePlugin", compilation => {
        if (isInitialBuild) {
          isInitialBuild = false
          spawn("nodemon dist/index.js --watch dist", {
            stdio: "inherit",
            Shell: true
          })
        }
      })
    }
  }
}

webpack.config.js：

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

package.json：

"scripts": {
  "dev"  : "webpack --watch"
},

それが役に立てば幸い。

0
ford04

Webpackとnodemonを使用するのにプラグインは必要ありません。package.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
Antoni Xu

@Lingには、正しいことに非常に近い答えがあります。しかし、誰かが最初に監視を実行するとエラーになります。エラーを防ぐために、ソリューションを修正する必要があります。

  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でスクリプトをセットアップします。これは、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
Ash Blue