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

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"

webpack is a module bundler. webpack takes modules with dependencies and generates static assets representing those modules. Why another module bundler? Existing module bundlers are not well suited for big projects (big single page applications). The most pressing reason for developing another module bundler was Code Splitting and that static assets should fit seamlessly together through modularization. I tried to extend existing module bundlers, but it wasn?t possible to achieve all goals. Go

What are loaders? Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source. For example, you can use loaders to tell webpack to load CoffeeScript or JSX. Loader features Loaders can be chained. They are applied in a pipeline to the resource. The final loader is expected to return JavaScript, the others can return arbitrary format (which is passed to the

Built-in plugins Plugins are included in your module by using the plugins property in the webpack config. // webpack should be in the node_modules directory, install if not. var webpack = require("webpack"); module.exports = { plugins: [ new webpack.ResolverPlugin([ new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) ], ["normal", "loader"]) ] }; Other plugins Plugins that are not built-in may be installed via npm if published t

resolving general resolving issues --display-error-details give you more details. Read Configuration regarding resolving starting at resolveloaders have their own resolving configuration resolveLoader npm linked modules doesn?t find their dependencies The node.js module resolving algorithm is pretty simple: module dependencies are looked up in node_modules folders in every parent directory of the requiring module. When you npm link modules with peer dependencies that are not in your root d

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

Usage Like browserify, webpack analyzes all the node-style require() calls in your app and builds a bundle that you can serve up to the browser using a <script> tag. Instead of doing $ browserify main.js > bundle.js do $ webpack main.js bundle.js webpack doesn?t write to stdout. You need to specify a filename. It can?t write to stdout because, unlike browserify, it may generate multiple output files. The best way to configure webpack is with a webpack.config.js file. It?s loaded from c

In some cases webpack cannot parse some file, because it has a unsupported module format or isn?t even in a module format. Therefore you have many options to convert the file into a module. Using loaders On this page all examples with loaders are inlined into require calls. This is just for demonstration. You may want to configure them in your webpack config instead. Read Using loaders for more details how to do this. Importing Useful when a file has dependencies that are not imported via requi

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