Add a recipe: Using NPM and Webpack as a build tool

koistya · koistya · commit 1bbe7fc71148 · 2015-12-19T15:33:52.000+03:00
diff --git a/docs/recipes/using-npm-and-webpack-as-a-build-tool.md b/docs/recipes/using-npm-and-webpack-as-a-build-tool.md
@@ -0,0 +1,93 @@
+## Using NPM and Webpack as a Build Tool
+
+The [npm](https://docs.npmjs.com/) command line utility that comes with Node.js
+allows you to run arbitrary scripts and [Node.js modules](https://www.npmjs.com/)
+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](http://eslint.org/)
+and [JSCS](http://jscs.info/), you just install them as project's dependencies:
+
+```shell
+$ npm install eslint jscs --save-dev
+```
+
+Add a new command line to `package.json/scripts`:
+
+```json
+{
+  "devDependencies": {
+    "eslint": "^1.10.0",
+    "jscs": "^2.7.0"
+  },
+  "scripts": {
+    "lint": "eslint src && jscs src"
+  }
+}
+```
+
+And execute it by running:
+
+```shell
+$ 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](http://webpack.github.io/) module bundler
+to compile the source code of your app into a distributable format. Since
+Webpack has numerous of [configuration options](http://webpack.github.io/docs/configuration),
+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:
+
+```js
+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:
+
+```json
+{
+  "devDependencies": {
+    "webpack": "^1.12.0"
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js"
+  }
+}
+```
+
+You can run it as follows:
+
+```shell
+$ npm run build
+```
