本文共 2005 字，大约阅读时间需要 6 分钟。
webpack用来在你的app中建立JS模块。为了从cli或api开始使用webpack，按照安装手顺即可。
webpack通过快速构建app依赖图并以正确顺序打包来简化工作。webpack可以配置来做代码定制优化，为产品划分vendor/css/js，运行一个热重载你的代码的开发服务器而不需要刷新页面之类的好特性。
继续学习以了解为什么你应该使用webpack
创建demo来试用webpack。
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
./node_modules/.bin/webpack --help # Shows a list of valid cli commands
.\node_modules\.bin\webpack --help # For windows users
webpack --help # If you installed webpack globally
创建子目录/app并新建index.js
app/index.js
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
为了运行这段代码，一般需要以下的HTML
index.html
In this example, there are implicit dependencies between thetags.
在这个示例中，标签中有隐式依赖。
index.js依赖在它运行之前引入的lodash。他是隐式依赖的原因是index.js从未声明lodash的需求，他只是假定有一个全局变量_存在。
但是如此维护JS项目有一些问题。
○如果依赖缺失，或者引入顺序错误，app将不能起作用。
○如果依赖被引入但未被使用，那么浏览器需要去下载很多不必要的代码。
为了将lodash依赖和index.js打包，我们需要首先安装lodash
npminstall--save lodash
然后导入
我们也需要更改index.html文件来仅仅需要一个bundle.js文件。
现在，index.js显示依赖lodash并将之与_绑定（没有全局作用域污染）
通过声明模块所需依赖，webpack可以以此信息创建依赖图。他将使用依赖图生成会以正确顺序执行的定制打包文件。当然，未被使用的依赖不会被打包。
运行webpack，以index.js为输入，bundle.js为输出，这个页面所必须的代码都将被打包好。
用浏览器打开index.html文件，观察成功打包后的结果，你应该会看到页面上出现Hello webpack的文字。
注意到app/index.js中使用的ES2015模块import（也称ES2015,harmony）了吗？虽然浏览器（暂时）不支持import/export，使用它们仍旧是好的，因为webpack会用ES5兼容封装代码替换那些命令。查看dist/bundle.js以验证。
注意，webpack除了import/export外不会初级你的代码。如果你在使用其他的ES2015特性，确保使用类似Bable或者Bublé这样的转换编译器。
在更加复杂的配置情况下，我们可以使用配置文件让webpack为我们打包代码。创建webpack.config.js文件后，你可以用下面所示config设定来完成之前的CLI命令操作。
按照如下方式运行。
config文件提供了所有的灵活性。使用配置文件我们可以添加加载器规则，插件，解析选项以及很多其他增强到包中。
通过CLI方式运行webpack并不有趣，我们可以更快捷，更改package.js：
现在你可以通过npm build命令完成同样功能了。npm找出scripts并临时合并到环境中这样就能包含bin命令了。你将会在大量项目中看到这个惯例。
既然你拥有一个基础创建，你应该深入 基本概念 和 配置 章节来更好地理解webpack的设计。同时查看guides学习如何处理共通问题。API部分包含低级别特性用法。
。
转载地址：http://ulkpa.baihongyu.com/