Skip to content

usage

Jump to bottom
Earl Cochran edited this page May 16, 2016 · 24 revisions

Installation

Installation is via npm:

npm install webpack -g

Create a modular JavaScript project

We can define modules in JavaScript using the CommonJS syntax, as for Node:

cats.js

var cats = ['dave', 'henry', 'martha'];
module.exports = cats;

app.js (Entry Point)

To properly determine what modules need to be loaded and the order they need to be loaded in you need to specify an entry point for your application (equivalent to Node's default index.js). For this quickstart we'll use app.js:

cats = require('./cats.js');
console.log(cats);

5 Second QuickStart

Give Webpack the entry point (app.js) and specify an output file (app.bundle.js):

webpack ./app.js app.bundle.js

Run node app.bundle.js and marvel in your abundance of cats.

node app.bundle.js
["dave", "henry", "martha"]

2 Minute Quickstart

Create an npm project structure. We'll use bin for this quickstart but it could be app, controllers, etc. Move app.js and cats.js to the src directory and intialize the npm project.

mkdir bin
mkdir src
mv *.js src
npm init (answer the questions)
npm i --save-dev webpack (you don\'t need webpack at runtime so it\'s a dev dependency)

Create a webpack.config.js file that includes the webpack module and specifies your entry point (now src/app.js):

const webpack = require('webpack');

module.exports = {
	entry: './src/app.js'
}

Note that you don't specify cats.js. Webpack will pick up the dependency for cats from require('cats') in app.js and include it in the bundle automatically. It will do the same for 'required' modules in node_modules as well.

Next, add the target bundle you want webpack to create to the webpack.config.js file:

const webpack = require('webpack');

module.exports = {
	entry: './src/app.js',
	output: {
		path: './bin',
		filename: 'app.bundle.js',
	}
}

Run 'webpack' from the command line (note you'll need the webpack module installed locally and globally). Webpack will build the bundle and save it as bin/app.bundle.js. If you examine webpack's output you'll see that it included ./src/app.js and ./src/cats.js. Run bin/app.bundle.js and you'll get your list of cats again.

webpack
node bin/app.bundle.js
["dave", "henry", "martha"]

Most people will be using a transpiler for ES6, CoffeScript, TypeScript, etc. We're going to tell webpack to run our source files through babel so we can use React and JSX. We'll do this by specifying a loader for JS(X) files. Webpack will use the loader to parse the files before including them in the bundle. To add babel as a loader, you add the the module/loader section to your webpack.config.js file:

const webpack = require('webpack');

module.exports = {
	entry: './src/app.js',
	output: {
		path: './bin',
		filename: 'app.bundle.js',
	},
	module: {
		loaders: [{
			test: /\.jsx?$/,
			exclude: /node_modules/,
			loader: 'babel',
        }]
	}
}

You'll need to include babel-core and babel-loader as dev dependencies (For an actual project you'll need to include the supporting babel plugins as well, like babel-preset-es2015):

npm i --save-dev babel-core babel-loader

There are a number of different loaders you can use to include files in your app bundle, including css and image loaders.

Usually you'll want to do some additional processing of the bundle in your workflow. An example would be minifying your file so that clients can load it faster. This can be done with plugins. We'll add the uglify plugin to our configuration:

const webpack = require('webpack');

module.exports = {
	entry: './src/app.js',
	output: {
		path: './bin',
		filename: 'app.bundle.js',
	},
	module: {
		loaders: [{
			test: /\.jsx?$/,
			exclude: /node_modules/,
			loader: 'babel',
		}]
	},
	plugins: [
		new webpack.optimize.UglifyJsPlugin({
			compress: {
				warnings: false,
			},
			output: {
				comments: false,
			},
		}),
	]
}

The Uglify plugin is included with webpack so you don't need to add additional modules, but this may not always be the case. You can write your own custom plugins. For this build, the uglify plugin cut the bundle size from 1618 bytes to 308 bytes.

FURTHER READING

Recommended reading: Webpack your bags by Maxime Fabre - a very good introduction on how to setup a real-world project using Webpack.

Clone this wiki locally