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: {

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

Prerequirement: Code Splitting If you need multiple bundles for multiple HTML pages you can use the ?multiple entry points? feature. It will build multiple bundles at once. Additional chunks can be shared between these entry chunks and modules are only built once. Hint: When you want to start an entry chunk from a module, you are doing something wrong. Use Code Splitting instead! Every entry chunk contains the webpack runtime, so you can only load one entry chunk per page. (Hint: To bypass this

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

Installation $ npm install webpack -g The webpack command is now available globally. Pure CLI webpack <entry> <output> entry Pass a file or a request string. You can pass multiple entries (every entry is loaded on startup). If you pass a pair in the form <name>=<request> you can create an additional entry point. It will be mapped to the configuration option entry. output Pass a path to a file. It will be mapped to the configuration options output.path and output.filename

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.

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

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