Webpack Node.js with live reload.

readme.md

Webpack Server Quickstart

This is a webpack setup to transpile node.js code with live reload. It's great for building API's.

Conventions

If you want to change these, just modify the variables in webpack.config.js.

• src - place all server-side source code here
• build - where things will be compiled to.

package.json

{
  "version": "0.0.1",
  "scripts": {
    "start": "npm-run-all --parallel watch:server watch:build",
    "watch:build": "NODE_ENV='development' webpack --watch",
    "watch:server": "nodemon \"./build/server/main.js\" --watch \"./build/server\""
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-polyfill": "^6.20.0",
    "babel-preset-react-app": "^2.0.1",
    "chokidar": "^1.6.1",
    "file-loader": "^0.9.0",
    "friendly-errors-webpack-plugin": "^1.1.2",
    "json-loader": "^0.5.4",
    "nodemon": "^1.11.0",
    "npm-run-all": "^3.1.2",
    "raw-loader": "^0.5.1",
    "standard": "^8.6.0",
    "webpack": "2.1.0-beta.27",
    "webpack-node-externals": "^1.5.4"
  },
  "dependencies": {
    "body-parser": "^1.15.2",
    "compression": "^1.6.2",
    "express": "^4.14.0",
  }
}

webpack.config.js

'use strict'

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const WatchIgnorePlugin = require('watch-ignore-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');


const rootPath = path.resolve(process.cwd())            // -> ./
const buildPath = path.join(rootPath, 'build')          // -> ./build
const serverBuildPath = path.join(buildPath, 'server'), // -> ./build/server
const serverSrcPath =  path.join(rootPath, 'src'),      // -> ./src
const publicPath = '/'

module.exports = {
  target: 'node',
  devtool: 'source-map',
  externals: [nodeExternals()],
  node: {
    __filename: false,
    __dirname: false
  },
  entry: {
    main: [
      'babel-polyfill',
      `${serverSrcPath}/index.js`
    ],
  },
  output: {
    path: serverBuildPath,
    filename: '[name].js',
    chunkFilename: '[name]-[chunkhash].js',
    publicPath: publicPath,
    libraryTarget: 'commonjs2',
  },

  module: {
    rules: [
      {
        test: /\.json$/,
        loader: 'json-loader',
      },
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: [
          /node_modules/,
          buildPath,
        ],
        query: {
          presets: [
           "react-app"
          ],
        },
      },
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new FriendlyErrorsWebpackPlugin(),
    new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
  ]
}