node.jswebpackbrowser-syncnodemon

Webpack --watch and launching nodemon?


Thanks to an excellent answer by @McMath I now have webpack compiling both my client and my server. I'm now on to trying to make webpack --watch be useful. Ideally I'd like to have it spawn something like nodemon for my server process when that bundle changes, and some flavor of browsersync for when my client changes.

I realize it's a bundler/loader and not really a task runner, but is there some way to accomplish this? A lack of google results seems to indicate I'm trying something new, but this must have been done already..

I can always have webpack package to another directory and use gulp to watch it/copy it/browsersync-ify it, but that seems like a hack.. Is there a better way?


Solution

  • Faced the same problem and found the next solution - webpack-shell-plugin. It

    allows you to run any shell commands before or after webpack builds

    So, thats my scripts in 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",
    }
    

    If I run 'start' script it launches next script sequence: clean -> start -> poststart. And there is part of '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" event fires only once after first build, rebuilds are not trigger "onBuildEnd", so nodemon works as intended