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

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

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

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

webpack is fed a configuration object. Depending on your usage of webpack there are two ways to pass this configuration object: CLI If you use the CLI it will read a file webpack.config.js (or the file passed by the --config option). This file should export the configuration object: module.exports = { // configuration }; node.js API If you use the node.js API you need to pass the configuration object as parameter: webpack({ // configuration }, callback); multiple configurations In both

Feature webpack/webpack jrburke/requirejs substack/node-browserify jspm/jspm-cli rollup/rollup CommonJs require yes only wrapping in define yes yes commonjs-plugin CommonJs require.resolve yes no no no no CommonJs exports yes only wrapping in define yes yes commonjs-plugin AMD define yes yes deamdify yes no AMD require yes yes no yes no AMD require loads on demand yes with manual configuration no yes no ES2015 import/export no no no yes yes Generate a single bundle yes yes? yes yes yes

The CommonJS group defined a module format to solve JavaScript scope issues by making sure each module is executed in its own namespace. This is achieved by forcing modules to explicitly export those variables it wants to expose to the ?universe?, and also by defining those other modules required to properly work. To achieve this CommonJS give you two tools: the require() function, which allows to import a given module into the current scope. the module object, which allows to export something

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

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

Incremental builds Make sure you don?t do a full rebuild. webpack has a great caching layer that allows to keep already compiled modules in memory. There are some tools that help to use it: webpack-dev-server: Serves all webpack assets from memory. Best performance. webpack-dev-middleware: The same as middleware for advanced users. webpack ?watch or watch: true: Caches stuff but write assets to disk. Ok performance. Exclude modules from parsing With noParse you can exclude big libraries fr