前言
WebPack 是一个新型的纯 WEB 前端打包器，可以作为一个其他框架的一个资源聚合器。
以往有 RequireJS，但是随着时光的推移以及 MVVM 框架的普及，我骤然发现这个 WebPack 非常非常流行。
WebPack 文档：http://webpack.github.io/docs/
但是，官方文档并不是那么好读，我原本只是希望用来做 vuejs 的 SPA 项目。
在 stackoverflow http://stackoverflow.com/a/34802997/2544762 里面问了一个问题，然后里面推荐了一篇关于 WebPack 的入门文章：
https://web-design-weekly.com/2014/09/24/diving-webpack/
下面我们就来通过这篇教程来学习一下 WebPack。
什么是 WebPack?
webpack 是一个模块打包器
webpack 根据依赖关系获取模块，然后生成一些代表这些模块的静态资源。
由于网站正一步一步演变成 web 应用，它们越来越依赖 javascript。这导致客户端的代码越来越庞大。总体来讲，使用一个模块系统不仅仅会提升开发，也能够提升用户体验。
如果你正好在搞些大的工程，或者仅仅是研究这个领域的东西，你无疑会理解到将代码组织好的重要性。一个最好的办法来管理 javascript 的代码组织，就是将你的代码划分成模块。
当问题规约到模块系统，这里有一些比较著名的可能你已经用过或者听过，例如 Browserify 或者 RequireJS 这两者都是非常有用，实现了非常伟大的工作，但是 webpack 为你做到了更多，让我们来发掘一下吧！
为什么用 webpack?
使用 webpack 你可以轻易将你的应用切分成多个文件。
你的代码可以拆分到多个块，这些块也可以按需载入，以节省你的应用的首次加载时间。它们也可以让你的缓存通过 hash 恰当地缓存。这些东西一下子好像很难想象，但是它就是会帮你搞定！
webpack 可以构建和打包 css，预处理 css，编译 js（例如 coffeescript）,图像和更多的 东西可以通过 webpack 加载器 实现。这些类似 gulp 和 grunt 但是已经被
另一个的优秀的特性是 webpack 插件。webpack 插件可以将他们自己注入到构建过程中，来实现各种各样疯狂的东西。
webpack 的特性已经很足够了，我们来看看怎么用！
开始使用 Webpack!
先通过 npm 安装 webpack
注意：你可能需要
sudo权限来执行下面的某些命令
npm install webpack -g
在你项目的根目录添加一个 package.json 文件，通过 npm init 可以创建，或者直接将下面的内容保存到 package.json:
{
"name": "WebpackDemo",
"author": "Web Design Weekly",
"version": "0.0.1",
"description": "The start of good things!",
"private": true,
"scripts": {},
"dependencies": {},
"devDependencies": {}
}
现在我们将 webpack 加到刚才创建的 package.json 中。
npm install webpack --save-dev
现在 webpack 命令已经可以通过命令行调用了。你可以在官网上找到详细的选项，或者通过 webpack -h 查看。
有些常用的配置选项需要记住
webpack – 用于开发环境的一次性构建
webpack -p – 用于生产环境的一次性构建（会使用压缩）
webpack --watch – 用于持续增量构建
webpack -d – 包括源代码映射（map文件）
webpack --colors – 让构建的内容好看一些
我们要做的下一件事是在项目根目录创建一个 webpack.config.js，以确保内容组织良好。
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
}
创建一个简单的 JavaScript 文件 main.js，包含下面的内容：
document.write('Webpack for the win!');
现在你在命令行里面执行 webpack 命令，你就会得到一个“webpack化”的 bundle.js 文件！刚才发生的事情就是 webpack 命令找到你的 webpack.config.js 文件然后魔法般地实现了这个结果。
为了确认所有东西都能够工作，我们可以创建一个具有如下内容的 index.html 文件：
<html>
<head>
<script type="text/javascript" src="bundle.js"></script>
</head>
<body>
<h1>Webpack Demo</h1>
</body>
</html>
将多个模块合成一个
前面的例子太杂碎了，但是相信我，马上你就可以看到，Webpack 具备超级牛力。我们稍为过度一下，然后就会试着将多个模块添加到你的最终脚本中去。
首先创建一个 second.js，包含下面的内容：
module.exports = document.write('Oh yeah another file.');
然后在 main.js 给它一个引用：
require('./second.js');
再度于命令行运行 webpack 命令，创建你的 bundle.js。你现在可以看到两个文件很好地合在了一起。
搞定之后你可以试试 webpack -p。现在你的 bundle.js 已经最小化了。
在混合中加入一个加载器
我们已经简短介绍过 webpack 加载器了，是时候配置一个了！
如果你想知道得清楚一些，这里在 webpack 的网站有一个加载器的列表。在这个案例中，我们准备要创建一个CoffeeScript 加载器
将 loader 加到你的 package.json 中：
npm install coffee-loader --save-dev
还要将这个新的块加入 webpack.config.js
module: {
loaders: [
{ test: /\.coffee$/, loader: "coffee-loader" }
]
}
为了测试加载器我们需要添加一个简单的 CoffeeScript 文件。让我们来创建一个 third.coffee 并且加入如下内容：
alert "webpack is boss!"
在 main.js 中引入它：
require('./third.coffee');
执行 webpack 命令，你现在可以在网页中看到一个 alert 警告框。
译注：注意在执行
webpack的时候可能会报错，那可能是因为基础的 coffee-script 库并没有装上，通过sudo npm install coffee-script -g可以解决问题。
再声明一下，这仅仅是做一些很肤浅的动作来表明加载器的功能，但是希望这可以让你理解如何将它们配置起来。
加入 css 和图片
首先我们需要再在 package.json 中安装几个加载器：
sudo npm install style-loader css-loader url-loader --save-dev
在 webpack.config.js 中添加这些新的模块：
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
注意：这些在
url-loader的参数会将 8kb 以下的图片换成行内图片（使用 base64 字符串表示）
通过这些新的加载器，我们还需要对 webpack 做一点调整来实现它的魔法。
在 webpack.config.js 里面，调整一下输出的参数像下面这样：
output: {
path: './build', // 这是图片和 js 存放的位置
publicPath: 'http://yoururl.com', // 这用于创建 url
filename: 'bundle.js'
}
我们在这里添加了 path 和 publicPath。
注意：如果你已经实践，你会发现你还需要修改你 HTML 里面的
bundle.js位置，它现在在build目录下面。
为了测试新的加载器能够正确工作，让我们添加一个 CoffeeScript 文件 image.coffee，然后将其在 main.js 里面引入：require('./image/coffee');。
在 image.coffee 里面添加两个图片的引入（一个小于 8kb 以观测行内 base64 url 的构建）
img1 = document.createElement('img')
img1.src = require('./your-small-image.png')
document.body.appendChild img1
img2 = document.createElement('img')
img2.src = require('./your-big-image.png')
document.body.appendChild img2
同样地，我们创建一个新的 CSS 文件 style.css，包含这些内容：
body {
background: tomato;
}
然后我们在 main.js 里面将其引入：require('./styles.css')
然后再运行一下 webpack，DUANG…
欢迎使用 Webpack
将所有东西包在一起
上面是一个 webpack 的一个基础介绍。希望你已经得到一个总体的理解然后可以将你的项目“Webpack化”。非常感谢Pete Hunt令人惊叹的教程帮助了我写这篇文章。
如果你还有不明白的话，可以在 github 上下载这些例子完整的源代码。
享受 webpack 吧！
其他参考资源
http://jiongks.name/blog/just-vue/
【转载请附】愿以此功德，回向 >>
原文链接：http://www.huangwenchao.com.cn/2016/04/webpack-intro.html【WebPack 入门（最简单的例子）】