Getting Started

Installation

Run the following to install Webpack and Webpack Dev Server globally (Yarn is used for examples, but you can use npm instead):

yarn global add webpack@2.1.0-beta.25 webpack-dev-server@2.1.0-beta.9

Then in your working project directory, run:

yarn add --dev webpack@2.1.0-beta.25 webpack-dev-server@2.1.0-beta.9

First Steps

Create a —— webpack.config.js file in the root of your project directory. A basic example looks like this:

'use strict';

const webpack = require('webpack');

module.exports = {
  entry: {
    app: 'app.js', // Which file(s) Webpack should parse
  },
  output: {
    filename: '[name].bundle.js', // The filename template
    path: __dirname + '/dist/js', // Directory for the output file(s)
  },
};

Note: __dirname is the root directory of your project.

Warning: output will overwrite files in case of a name conflict!

Run

webpack -p

And Webpack will compile app.js—along with its dependencies—into ./dist/js/app.bundle.js (the -p is optional and stands for production, and will uglify, minify, and strip comments from output).

Under entry, you can rename app to whatever you want. Specifying an object for entry like above will make your life easier when you start dealing with multiple files.

Multiple Files

Have multiple files you’d like to bundle together into one? Specify an array for entry:

module.exports = {
  entry: {
    letters: ['a.js', 'b.js', 'c.js'],
    numbers: 'one.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/js',
  },
};

This will bundle scripts a, b, and c into letters.bundle.js, and one into numbers.bundle.js. Note that we were easily able to specify a pretty complicated bundle with such a simple notation.

For more information on multiple entry points, see the next chapter on Splitting JavaScript.

Developing

We have one app.js JavaScript file in a js/ folder:

└—— js/
    └—— app.js

'use strict';

console.log('Hello World');

And another file ./index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample page</title>
    <script src="/js/app.bundle.js"></script>
  </head>
  <body>
    This is a simple app.
  </body>
</html>

This is our ./webpack.config.js:

'use strict';

const webpack = require('webpack');

module.exports = {
  entry: {
    app: './js/app.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist/js',
    publicPath: 'js',
  },
};

Note that in our HTML, we’re asking for js/app.bundle.js—our output file. Let’s start the server with

webpack-dev-server

Now navigate to localhost:8080 in a browser, and you can see your website. If you open your JavaScript console you should see

Hello World

to indicate our app is working.

Note: webpack-dev-server takes advantage of hot loading, which means that any changes you make to source files will automatically appear on your development server without refreshing. However, any changes you make to webpack.config.js will require you to restart your server to take effect (Ctrl + C, webpack-dev-server).

Building

To build a production-ready file, simply run

webpack -p

and Webpack will bundle everything together according to your output settings.

results matching ""

    No results matching ""