webpack for browserify users.cn

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.

跟browerify一样，webpack分析你的程序中所有node-style的require()函数的调用，并生成一个打包文件。可以通过使用<script>标签，将该文件提供给浏览器

Instead of doing

相比于这样搞

$ browserify main.js > bundle.js

do

webpack要这样搞

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

webpack 不会将文件写入标准输出流。你需要指定一个文件名。不像browserify，它不能写到输出流是因为可能生成多个输出文件

---

The best way to configure webpack is with a webpack.config.js file. It's loaded from current directory, when running the executable.

configure webpack 的最佳方式是使用webpack.config.js文件。当运行executable时，webpack从当前目录读取该文件。

So So，下面这行命令

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

maps to webpack with this config:

等价的webpack配置是

module.exports = {
	entry: "./main.js",
	output: {
		filename: "bundle.js"
	}
}

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

注意： webpack.config.js文件必须export输出其配置。也就是上例的module.exports = {...}

---

outfile

输出文件

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"
	}
}

entry

入口文件

$ browserify --entry a.js --entry b.js

{
	entry: [
		"./a.js",
		"./b.js"
	]
}

transform

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:

browserify使用transform预处理文件。webpack使用loaders。loader是一种将源代码作为参数并返回（修改后的）源代码的函数。类似运行与node.js的transforms，可以串联，并且可以是异步的。loader可以通过query字符串采用额外的参数。loader可以在require()调用中使用。Transforms可在package.json中指定。 browserify将经过配置的transform应用到每个模块。而在webpack配置中，你通过正则表达式来匹配模块。在通常情况下，你应在webpack.config.js指定loader：

$ browserify --transform coffeeify

{
	module: {
		loaders: [
			{ test: /\.coffee$/, loader: "coffee-loader" }
		]
	}
}

Note: It's possible to use browserify transforms with webpack and the transform-loader. 注意： 在webpack中使用browserify的transform是可能的，参阅transform-loader

debug

debug 调试

$ browserify -d
# Add inlined SourceMap

$ webpack --devtool inline-source-map
# Add inlined SourceMaps

$ webpack --devtool source-map
# Emit SourceMaps as separate file

$ webpack --devtool eval
# 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

extension

语言扩展

$ browserify --extension coffee

{
	resolve: {
		extensions: ["", ".js", ".coffee"]
	}
}

standalone

独立发布

browserify --standalone MyLibrary

{
	output: {
		library: "MyLibrary",
		libraryTarget: "umd"
	}
}
// webpack --output-library MyLibrary --output-library-target umd

ignore

忽略文件

$ browserify --ignore file.js

{
	plugins: [
		new webpack.IgnorePlugin(/file\.js$/)
	]
}

node globals

node 全局变量

$ browserify --insert-globals
$ browserify --detect-globals

You can enable/disable these node globals individually:

你可以独立地开启/关闭这些node的全局变量

{
	node: {
		filename: true,
		dirname: "mock",
		process: false,
		global: true
	}
}

ignore-missing

忽略缺失的模块

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

webpack 为每个缺失的依赖打印错误，但不会打断打包流程。你可以忽略这些错误。运行时require的调用会抛出异常

noparse

不解析指定文件

$ browserify --noparse=file.js

module.exports = {
	module: {
		noParse: [
			/file\.js$/
		]
	}
};

build info

构建信息

$ browserify --deps
$ browserify --list

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

WebPack不支持外部引用。你不能暴露require函数给其他脚本。对于一个页面上的所有脚本就只使用webpack处理吧，或这样做：

{
	output: {
		library: "require",
		libraryTarget: "this"
	}
}

// entry point
module.exports = function(parentRequire) {
	return function(module) {
		switch(module) {
		case "through": return require("through");
		case "duplexer": return require("duplexer");
		}
		return parentRequire(module);
	};
}(typeof __non_webpack_require__ === "function" ? __non_webpack_require__ : function() {
	throw new Error("Module '" + module + "' not found")
});

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:

使用browserify，你可以创建一个公共包，在多个页面上结合对应打包文件使用。为了生成这类包，你使用--exclude -x选项来剔除公共模块。这有个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:

webpack支持多页面的编译。有个插件用来自动抽离公用模块

var webpack = require("webpack");
{
	entry: {
		beep: "./beep.js",
		boop: "./boop.js",
	},
	output: {
		path: "static",
		filename: "[name].js"
	},
	plugins: [
		// ./robot is automatically detected as common module and extracted
		new webpack.optimize.CommonsChunkPlugin("common.js")
	]
}

<script src="common.js"></script>
<script src="beep.js"></script>

API

API 接口

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

没必要学更多，只要将配置对象传给webpack的API

var webpack = require("webpack");

webpack({
	entry: "./main.js",
	output: {
		filename: "bundle.js"
	}
}, function(err, stats) {
	err // => fatal compiler error (rar)
	var json = stats.toJson() // => webpack --json
	json.errors // => array of errors
	json.warnings // => array of warnings
});

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