webpack doc

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 tag.

Instead of doing

  1. $ browserify main.js > bundle.js

do

  1. $ 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 | configuration]] webpack is with a webpack.config.js file. It's loaded from current directory, when running the [[executable | CLI]].

So

  1. $ browserify --entry main.js --outfile bundle.js

maps to webpack with this config:

  1. module.exports = {
  2.     entry: "./main.js",
  3.     output: {
  4.         filename: "bundle.js"
  5.     }
  6. }

Note: A webpack.config.js should export the configuration, hence the module.exports = {…} in the above example.

outfile

If you want to emit the output files to another directory: 

  1. $ browserify --outfile js/bundle.js
  1. {
  2.     output: {
  3.         path: path.join(__dirname, "js"),
  4.         filename: "bundle.js"
  5.     }
  6. }

entry

  1. $ browserify --entry a.js --entry b.js
  1. {
  2.     entry: [
  3.         "./a.js",
  4.         "./b.js"
  5.     ]
  6. }

transform

browserify uses transforms to preprocess files. webpack uses loaders. Loaders are functions that take source code as an argument and return (modified) source code. Like transforms they run in node.js, can be chained, and can be asynchronous. Loaders can take additional parameters by query strings. Loaders can be used from require() calls. Transforms can be specified in the package.json. browserify applies configured transforms for each module. Within the webpack configuration you select the modules by RegExp. In the common case you specify loaders in the webpack.config.js:

  1. $ browserify --transform coffeeify
  1. {
  2.     module: {
  3.         loaders: [
  4.             { test: /\.coffee$/, loader: "coffee-loader" }
  5.         ]
  6.     }
  7. }

Note: It's possible to use browserify transforms with webpack and the transform-loader.

debug

  1. $ browserify -d
  2. # Add inlined SourceMap
  1. $ webpack --devtool inline-source-map
  2. # Add inlined SourceMaps
  4. $ webpack --devtool source-map
  5. # Emit SourceMaps as separate file
  7. $ webpack --devtool eval
  8. # Emit SourceUrls within evals (faster)
  10. $ webpack --devtool eval-source-map
  11. # Emit inlined SourceMaps within evals
  13. $ webpack --debug
  14. # Add more debugging information to the source
  16. $ webpack --output-pathinfo
  17. # Add comments about paths to source code
  18. # (Useful when using no or the eval devtool)
  20. $ webpack -d
  21. # = webpack --devtool source-map --debug --output-pathinfo

extension

  1. $ browserify --extension coffee
  1. {
  2.     resolve: {
  3.         extensions: ["", ".js", ".coffee"]
  4.     }
  5. }

standalone

  1. browserify --standalone MyLibrary
  1. {
  2.     output: {
  3.         library: "MyLibrary",
  4.         libraryTarget: "umd"
  5.     }
  6. }
  7. // webpack --output-library MyLibrary --output-library-target umd

ignore

  1. $ browserify --ignore file.js
  1. {
  2.     plugins: [
  3.         new webpack.IgnorePlugin(/file\.js$/)
  4.     ]
  5. }

node globals

  1. $ browserify --insert-globals
  2. $ browserify --detect-globals

You can enable/disable these node globals individually:

  1. {
  2.     node: {
  3.         filename: true,
  4.         dirname: "mock",
  5.         process: false,
  6.         global: true
  7.     }
  8. }

ignore-missing

  1. $ browserify --ignore-missing

webpack prints errors for each missing dependency, but doesn't fail to build a bundle. You are free to ignore these errors. The require call will throw an error on runtime.

noparse

  1. $ browserify --noparse=file.js
  1. module.exports = {
  2.     module: {
  3.         noParse: [
  4.             /file\.js$/
  5.         ]
  6.     }
  7. };

build info

  1. $ browserify --deps
  2. $ browserify --list
  1. $ webpack --json

external requires

webpack does not support external requires. You cannot expose the require function to other scripts. Just use webpack for all scripts on a page or do it like this:

  1. {
  2.     output: {
  3.         library: "require",
  4.         libraryTarget: "this"
  5.     }
  6. }
  1. // entry point
  2. module.exports = function(parentRequire) {
  3.     return function(module) {
  4.         switch(module) {
  5.         case "through": return require("through");
  6.         case "duplexer": return require("duplexer");
  7.         }
  8.         return parentRequire(module);
  9.     };
  10. }(typeof __non_webpack_require__ === "function" ? __non_webpack_require__ : function() {
  11.     throw new Error("Module '" + module + "' not found")
  12. });

multiple bundles

With browserify you can create a commons bundle that you can use in combination with bundles on multiple pages. To generate these bundles you exclude the common stuff with the --exclude -x option. Here is the example from the browserify README:

  1. $ browserify -r ./robot > static/common.js
  2. $ browserify -x ./robot.js beep.js > static/beep.js
  3. $ browserify -x ./robot.js boop.js > static/boop.js

webpack supports multi-page compilation and has a plugin for the automatic extraction of common modules:

  1. var webpack = require("webpack");
  2. {
  3.     entry: {
  4.         beep: "./beep.js",
  5.         boop: "./boop.js",
  6.     },
  7.     output: {
  8.         path: "static",
  9.         filename: "[name].js"
  10.     },
  11.     plugins: [
  12.         // ./robot is automatically detected as common module and extracted
  13.         new webpack.optimize.CommonsChunkPlugin("common.js")
  14.     ]
  15. }
  1. <script src="common.js"></script>
  2. <script src="beep.js"></script>

API

No need to learn much more. Just pass the config object to the webpack API:

  1. var webpack = require("webpack");
  3. webpack({
  4.     entry: "./main.js",
  5.     output: {
  6.         filename: "bundle.js"
  7.     }
  8. }, function(err, stats) {
  9.     err // => fatal compiler error (rar)
  10.     var json = stats.toJson() // => webpack --json
  11.     json.errors // => array of errors
  12.     json.warnings // => array of warnings
  13. });

Third-party-tool mappings

browserify webpack
watchify webpack --watch
browserify-middleware [[webpack-dev-middleware]]
beefy [[webpack-dev-server]]
deAMDify webpack
decomponentify component-webpack-plugin
list of source transforms [[list of loaders]], transform-loader