commit 1bbe7fc71148d99896c3d5e43e3a81769dbae55f
parent 8873c58abb132c044f6039c779eeaeef78733aaa
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Sat, 19 Dec 2015 15:33:52 +0300
Add a recipe: Using NPM and Webpack as a build tool
Diffstat:
1 file changed, 93 insertions(+), 0 deletions(-)
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
+```
