- Notifications
You must be signed in to change notification settings - Fork128
webpack for browserify users
Like browserify, webpack analyzes all the node-stylerequire() 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.jsdo
$ 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 is ready to generate multiple output files.
The best way toconfigure webpack is with awebpack.config.js file. It's loaded from current directory, when running theexecutable.
So
$ browserify --entry main.js --outfile bundle.js
maps towebpack with this config:
module.exports={entry:"./main.js",output:{filename:"bundle.js"}}
Note: A
webpack.config.jsshouldexport the configuration, hence themodule.exports = {...}in the above example.
If you want to emit the output files to another directory:
$ browserify --outfile js/bundle.js
{output:{path:path.join(__dirname,"js"),filename:"bundle.js"}}
$ browserify --entry a.js --entry b.js
{entry:["./a.js","./b.js"]}
browserify usestransforms to preprocess files. webpack usesloaders. 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 fromrequire() calls. Transforms can be specified in thepackage.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 thewebpack.config.js:
$ browserify --transform coffeeify
{module:{loaders:[{test:/\.coffee$/,loader:"coffee-loader"}]}}
Note: It's possible to use browserify transforms with webpack and thetransform-loader.
$ browserify -d# Add inlined SourceMap$ webpack --devtool inline-source-map# Add inlined SourceMaps$ webpack --devtool source-map# Emit SourceMaps as separate file$ webpack --devtooleval# Emit SourceUrls within evals (faster)$ webpack --devtool eval-source-map# Emit inlined SourceMaps within evals$ webpack --debug# Add more debugging information to the source$ webpack --output-pathinfo# Add comments about paths to source code# (Useful when using no or the eval devtool)$ webpack -d# = webpack --devtool source-map --debug --output-pathinfo
$ browserify --extension coffee
{resolve:{extensions:["",".js",".coffee"]}}
browserify --standalone MyLibrary
{output:{library:"MyLibrary",libraryTarget:"umd"}}// webpack --output-library MyLibrary --output-library-target umd
$ browserify --ignore file.js
{plugins:[newwebpack.IgnorePlugin(/file\.js$/)]}
$ browserify --insert-globals$ browserify --detect-globals
You can enable/disable these node globals individually:
{node:{filename:true,dirname:"mock",process:false,global:true}}
$ 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. Therequire call will throw an error on runtime.
$ browserify --noparse=file.js
module.exports={module:{noParse:[/file\.js$/]}};
$ browserify --deps$ browserify --list
$ webpack --json
webpack does not support external requires. You cannot expose therequire function to other scripts. Just use webpack for all scripts on a page or do it like this:
{output:{library:"require",libraryTarget:"this"}}
// entry pointmodule.exports=function(parentRequire){returnfunction(module){switch(module){case"through":returnrequire("through");case"duplexer":returnrequire("duplexer");}returnparentRequire(module);};}(typeof__non_webpack_require__==="function" ?__non_webpack_require__ :function(){thrownewError("Module '"+module+"' not found")});
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:
$ browserify -r ./robot> static/common.js$ browserify -x ./robot.js beep.js> static/beep.js$ 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:
varwebpack=require("webpack");{entry:{beep:"./beep.js",boop:"./boop.js",},output:{path:"static",filename:"[name].js"},plugins:[// ./robot is automatically detected as common module and extractednewwebpack.optimize.CommonsChunkPlugin("common.js")]}
<scriptsrc="common.js"></script><scriptsrc="beep.js"></script>
No need to learn much more. Just pass the config object to thewebpack API:
varwebpack=require("webpack");webpack({entry:"./main.js",output:{filename:"bundle.js"}},function(err,stats){err// => fatal compiler error (rar)varjson=stats.toJson()// => webpack --jsonjson.errors// => array of errorsjson.warnings// => array of warnings});
| 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 |
webpack 👍