Webpack

README.md

webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.

Contents:

• 1 Core concepts
• 2 Update npm
• 3 Install webpack
• 4 Source code and bundle assets
• 5 Run application
• 6 Simple web page using bundled assets
• 7 Use of exports

More:

• Guides
• Environment variables
• Public path
• Configuration
• Configuration based on env
• Debugging
• Watch mode
• Lazy loading
• Shimming
• Caching
• clean-webpack-plugin - A webpack plugin to remove/clean your build folder(s) before building.
• uglifyjs-webpack-plugin
• commons-chunk-plugin

Back to Top

README_10001.md

1 Core concepts

1.1 Entry

The entry point tells webpack where to start and follows the graph of dependencies to know what to bundle. You can think of your application's entry point as the contextual root or the first file to kick off your app.

In webpack we define entry points using the entry property in our webpack configuration object.

1.2 Output

Once you've bundled all of your assets together, you still need to tell webpack where to bundle your application. The webpack output property tells webpack how to treat bundled code.

The minimum requirements for the output property in your webpack config is to set its value to an object including the following two things:

• A filename to use for the output file(s).
• An absolute path to your preferred output directory.

1.3 Loaders

webpack treats every file (.css, .html, .scss, .jpg, etc.) as a module. However, webpack itself only understands JavaScript.

Loaders in webpack transform these files into modules as they are added to your dependency graph.

At a high level, loaders have two purposes in your webpack config. They work to:

• Identify which file or files should be transformed by a certain Loader.
• Transform those files so that they can be added to your dependency graph (and eventually your bundle).

There are three ways to use loaders in your application:

• Configuration (recommended): Specify them under module.rules in your webpack.config.js file.
• Inline: Specify them explicitly in each import statement.
• CLI: Specify them within a shell command.

1.4 Plugins

While Loaders only execute transforms on a per-file basis, plugins are most commonly used to perform actions and custom functionality on "compilations" or "chunks" of your bundled modules.

In order to use a plugin, you just need to require() it and add it to the plugins array. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with new.

Back to File

Back to Top

README_10002.md

2 Update npm

Update npm and install webpack.

$ npm install -g n
$ npm cache clean -f
$ npm -v
3.10.9

$ node -v
v7.1.0

Back to File

Back to Top

README_10003.md

3 Install webpack

$ mkdir webpack-demo
$ cd webpack-demo

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

$ npm install webpack --save-dev

Back to File

Back to Top

README_10004.md

4 Source code and bundle assets

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

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

$ webpack src/app.js bin/app.bundle.js
Hash: 0f28f3b48d8803af96b0
Version: webpack 3.6.0
Time: 60ms
        Asset     Size  Chunks             Chunk Names
app.bundle.js  2.66 kB       0  [emitted]  main
   [0] ./src/app.js 47 bytes {0} [built]
   [1] ./src/cats.js 63 bytes {0} [built]

If you don't want to pass the source and destination files for webpack command, you can create a config file instead.

// webpack.config.js
const path = require('path');

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

Back to File

Back to Top

README_10005.md

5 Run application

$ node bin/app.bundle.js
[ 'dave', 'henry', 'martha' ]

Back to File

Back to Top

README_10006.md

6 Simple web page using bundled assets

// src/app.js
document.write('It works.');

<!-- index.html -->
<html>
<head>
  <script type='text/javascript' src='bin/app.bundle.js' charset='utf-8'></script>
</head>
</html>

$ webpack
Hash: b4cada9e28090f5c97e9
Version: webpack 3.6.0
Time: 47ms
        Asset    Size  Chunks             Chunk Names
app.bundle.js  2.5 kB       0  [emitted]  main
   [0] ./src/app.js 28 bytes {0} [built]

Launch web page in browser.

$ open index.html

Back to File

Back to Top

README_10007.md

7 Use of exports

// src/content.js
module.exports = 'It works again.';

// src/app.js
document.write(require('./content.js'));

$ webpack
$ open index.html

Back to File

Back to Top