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

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

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"

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

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

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

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

node.js Install node.js. node.js comes with a package manager called npm. webpack webpack can be installed through npm: $ npm install webpack -g webpack is now installed globally and the webpack command is available. Use webpack in a project It?s the best to have webpack also as dependency in your project. Through this you can choose a local webpack version and will not be forced to use the single global one. Add a package.json configuration file for npm with: $ npm init The answers to the ques

To use components from bower you need to add two things to webpack: Let webpack look in the bower_components folder. Let webpack use the main field from the bower.json file. Configuration See configuration resolve.modulesDirectories and list of plugins ResolverPlugin. var path = require("path"); var webpack = require("webpack"); module.exports = { resolve: { root: [path.join(__dirname, "bower_components")] }, plugins: [ new webpack.ResolverPlugin( new w

Using webpack with gulp is as easy as using the node.js API. var gulp = require("gulp"); var gutil = require("gulp-util"); var webpack = require("webpack"); var WebpackDevServer = require("webpack-dev-server"); Normal compilation gulp.task("webpack", function(callback) { // run webpack webpack({ // configuration }, function(err, stats) { if(err) throw new gutil.PluginError("webpack", err); gutil.log("[webpack]", stats.toString({ // output options