babel，使用nodemon脚本的webpack？

Question

I was wondering if there is a way to configure webpack with babel and nodemon. II pretty much searched the web but found nothing helpful or it may be me because i am pretty much new to build tools. I have this script in my package.json :

"start": "nodemon app.js --exec babel-node"

It transpile my code and also restart the server when there is changes. I was wondering if there is such configuration for webpack with the watch functionality. Can i do it with webpack (run the server and watch for changes and restart along with the babel transpile) ?

Answer 1

You don't have to use nodemon, you can use webpack's watch feature .

Here's an example script, let's call it backend-dev.js :

const path = require('path');
const webpack = require('webpack');
const spawn = require('child_process').spawn;

const compiler = webpack({
    // add your webpack configuration here
});
const watchConfig = {
    // compiler watch configuration
    // see https://webpack.js.org/configuration/watch/
    aggregateTimeout: 300,
    poll: 1000
};

let serverControl;

compiler.watch(watchConfig, (err, stats) => {
    if (err) {
        console.error(err.stack || err);
        if (err.details) {
            console.error(err.details);
        }
        return;
    }

    const info = stats.toJson();

    if (stats.hasErrors()) {
        info.errors.forEach(message => console.log(message));
        return;
    }

    if (stats.hasWarnings()) {
        info.warnings.forEach(message => console.log(message));
    }

    if (serverControl) {
        serverControl.kill();
    }

    // change app.js to the relative path to the bundle created by webpack, if necessary
    serverControl = spawn('node', [path.resolve(__dirname, 'app.js')]);

    serverControl.stdout.on('data', data => console.log(data.toString()));
    serverControl.stderr.on('data', data => console.error(data.toString()));
});

You can start this script on the command line with

node backend-dev.js

When you make changes in your server code, webpack will recompile and restart your server.

Answer 2

As for the babel part, I believe babel loader have you covered. I use this in my webpack.config.js (webpack 2):

module: {
  ...
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {presets: ['es2015']}
    }
  ]
}

But I don't use nodemon, so sorry for just half an answer. I do use webpack-dev-server in development. and pm2 in staging/production and I'm using it's watch while staging so I don't have to restart things manually, and it's much easier to configure than webpacks dito:

// pm2's ecosystem.json (just to be thorough):
"watch"        : "./",
"ignore_watch" : "node_modules", 

No watch in production though, no no, not me, no touchy - The less things that can go wrong the better.