Note: The webpack-dev-middleware is for advanced users. See webpack-dev-server for a ready-to-use solution. The webpack-dev-middleware is a small middleware for a connect-based middleware stack. It uses webpack to compile assets in-memory and serve them. When a compilation is running every request to the served webpack assets is blocked until we have a stable bundle. You can use it in two modes: watch mode (default): The compiler recompiles on file change. lazy mode: The compiler compiles on ev

You developed a library and want to distribute it in compiled/bundled versions (in addition to the modularized version). You want to allow the user to use it in a <script>-tag or with a amd loader (i. e. require.js). Or you depend on various precompilations and want to take the pain for the user and distribute it as simple compiled commonjs module. configuration options webpack has three configuration options that are relevant for these use cases: output.library, output.libraryTarget and

WIP see CLI for the command line interface. see node.js API for the node.js interface. see Configuration for the configuration options.

Plugins expose the full potential of the Webpack engine to third-party developers. Using staged build callbacks, developers can introduce their own behaviors into the Webpack build process. Building plugins is a bit more advanced than building loaders, because you?ll need to understand some of the Webpack low-level internals to hook into them. Be prepared to read some source code! Compiler and Compilation Among the two most important resources while developing plugins are the compiler and compi

The webpack-dev-server is a little node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle. It also has a little runtime which is connected to the server via Socket.IO. The server emits information about the compilation state to the client, which reacts to those events. You can choose between different modes, depending on your needs. So lets say you have the following config file: var path = require("path"); module.exports = { entry: { app: ["./app/main.js"

Note that Hot Module Replacement (HMR) is still an experimental feature. Introduction Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running without a page reload. Prerequirements Using Plugins: http://webpack.github.io/docs/using-plugins.html Code Splitting: http://webpack.github.io/docs/code-splitting.html webpack-dev-server: http://webpack.github.io/docs/webpack-dev-server.html How does it work? Webpacks adds a small HMR runtime to the bundle du

A quick summary of all methods and variables available in code compiled with webpack. Basic require CommonJs require(dependency: String) Returns the exports from a dependency. The call is sync. No request to the server is fired. The compiler ensures that the dependency is available. Style: CommonJs Example: var $ = require("jquery"); var myModule = require("my-module"); define (with factory) define([name: String], [dependencies: String[]], factoryMethod: function(...)) The name argument is ig

For a high-level introduction to writing plugins, start with How to write a plugin. Many objects in Webpack extend the Tapable class, which exposes a plugin method. And with the plugin method, plugins can inject custom build steps. You will see compiler.plugin and compilation.plugin used a lot. Essentially, each one of these plugin calls binds a callback to fire at specific steps throughout the build process. A plugin is installed once as Webpack starts up. Webpack installs a plugin by calling

The resolving process is pretty simple. We distinguish three types of requests: absolute path: require("/home/me/file") require("C:\Home\me\file") relative path: require("../src/file") require("./file") module path: require("module") require("module/lib/file") Resolving an absolute path We first check if the path points to a directory. For a directory we need to find the main file in this directory. Therefore the main field in the package.json is joined to the path. If there is no package.

dynamic requires A context is created if your request contains expressions, so the exact module is not known on compile time. Example: require("./template/" + name + ".jade"); webpack parses the require statement and extracts some information: Directory: ./template Regular expression: /^.*\.jade$/ context module A context module is generated. It contains references to all modules in that directory that can be required with a request matching the regular expression. The context module contai