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

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

Today?s websites are evolving into web apps: More and more JavaScript is in a page. You can do more stuff in modern browsers. Fewer full page reloads ? even more code in a page. As a result there is a lot of code on the client side! A big code base needs to be organized. Module systems offer the option to split your code base into modules. Module system styles There are multiple standards for how to define dependencies and export values: <script>-tag style (without a module system) Com

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

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

There is a grunt plugin for using webpack and the webpack-dev-server: grunt-webpack. It?s pretty simple to use: module.exports = function(grunt) { grunt.loadNpmTasks("grunt-webpack"); grunt.initConfig({ webpack: { options: { // configuration for all builds }, build: { // configuration for this build } }, "webpack-dev-server": { options: { webpack: {

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"

WIP devtool configuration option webpack-dev-server webpack-dev-middleware koa-webpack-dev: serve bundle + Hot Module Replacement in Koa.js development server

For big web apps it?s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into ?chunks? which are loaded on demand. Some other bundlers call them ?layers?, ?rollups?, or ?fragments?. This feature is called ?code splitting?. It?s an opt-in feature. You can define split points in your code base. Webpack takes care of the dependencies, output files and runtime stuff. To clarify