webpack初探
开始
可能你已经知道 webpack 被用来编译 JavaScript 的 modules(模块），一旦安装成功，你便能以 CLI 或者 API 的形式使用 webpack。如果你是一名 webpack 的新手，那么建议先读 核心概念以及竞品对比去学习为什么你会用 webpack，而不是其它被社区淘汰的竞品。
基础安装
首先我们创建一个文件夹，并且用 npm 初始化，然后在本地安装 webpack:
你的输出可能会有上述会有一点不同，但只要构建成功都是可以正常执行的。
打开index.html文件在你的浏览器中，如果一切正常的话，你会看见如下文本:’Hello webpack’。
ES2015 模块
尽管import和export表达式还不能被大多数浏览器所支持，webpack 依旧支持它们。其中的原理在于，webpack 实际上转换这些代码以便老的浏览器依旧可以运行他们。如果你阅读dist/bundle.js文件，你可以看到 webpack 如何处理它们，那是非常精巧的。
使用配置项
因为大部分项目都会需要一个更为复杂的步骤，所以 webpack 支持一个 配置文件。比起使用在终端中使用大量的命令行，使用配置文件是一个更为高效的方式，所以现在让我创建一个去替代终端命令。首先我们修改项目结构
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在让我们使用配置文件再一次运行配置文件
./node_modules/.bin/webpack --config webpack.config.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 
[big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
If a webpack.config.js is present, the webpack
如果 webpack.config.js 是存在的，webpack命令行工具会使用它作为默认配置文件，如果我们使用--config选项，我们可以通过文件名称任意指定一个配置文件。这对于一个配置项复杂到需要拆分的项目来说，是十分有用的。
配置文件比起命令行支持更加灵活的的功能。我们可以指定特定的加载规则，插件，解析选项和其它增强功能。参考配置文件文档去了解更多相关信息。
NPM 脚本
鉴于在命令行中运行 webpack 的命令比较长，我们可以使用一些简单快捷方式。我们现在可以在package.json文件中添加如下 npm 脚本。
{
...
"scripts": {
"build": "webpack"
},
...
}
现在我们只需要使用npm run build命令就可以替代冗长的 webpack 命令。添加这些在script中，我们可以通过名称引用本地已经安装的包，而不是写出完整的路径。这个方法允许我们直接使用webpack而不是使用node_modules/webpack/bin/webpack.js,并且它已经成为大多数基于 npm 的项目用来简化 webpack 命令的标准。
现在让我们来允许如下命令，你将会看到如下结果
npm run build
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]
结语
现在你已经有了一个基础的构建项目，现在你应该钻研[核心概念]和[配置文件]以便能更好地理解 wepack 的设计。API章节专注于介绍 webpack 提供的接口。或者如果你想更好地通过示例学习，在后续的章节中，你面对的 demo 基本上都是基于如下结构的.
project
webpack-demo |- package.json |- webpack.config.js |- /dist |- bundle.js |- index.html |- /src |- index.js |- /node_modules
