using-npm-and-webpack-as-a-build-tool.md

Using NPM and Webpack as a Build Tool

The npm command line utility that comes with Node.js allows you to run arbitrary scripts and Node.js modules without them being globally installed. This is very convenient, because other developers in your team don't need to worry about having some set of tools installed globally before they can execute build automation scripts in your project.

For example, if you need to lint your JavaScript code with ESLint and JSCS, you just install them as project's dependencies:

$ npm install eslint jscs --save-dev

Add a new command line to package.json/scripts:

{
  "devDependencies": {
    "eslint": "^1.10.0",
    "jscs": "^2.7.0"
  },
  "scripts": {
    "lint": "eslint src && jscs src"
  }
}

And execute it by running:

$ npm run lint         # npm run <script-name>

Which will be the same as running ./node_modules/bin/eslint src && ./node_modules/bin/jscs src, except that the former has a shorter syntax and works the the same way on all platforms (Mac OS X, Windows, Linux).

The same way you can run Webpack module bundler to compile the source code of your app into a distributable format. Since Webpack has numerous configuration options, it's a good idea to have all of them in a separate configuration file, as opposed to feeding them to Webpack's CLI as command line arguments. As a rule of thumb, you want to keep the "scripts" section in your package.json file short enough and easy to read.

For example, you may have src/client.js and src/server.js files that used as entry points to the client-side and server-side code of your app. The following Webpack configuration file (webpack.config.js) can be used to bundle them into client-side and server-side application bundles - build/public/client.js and build/server.js respectively:

module.exports = [{
  context: __dirname + '/src'
  entry: './client.js',
  output: {
    path: __dirname + '/build/public',
    filename: 'client.js'
  }
}, {
  context: __dirname + '/src',
  entry: './server.js',
  output: {
    path: __dirname + '/build',
    filename: 'server.js',
    libraryTarget: 'commonjs2'
  },
  target: 'node',
  externals: /node_modules/,
}];

The npm script for it may look like this:

{
  "devDependencies": {
    "webpack": "^1.12.0"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

You can run it as follows:

$ npm run build