Webpack 基础入门
如果你对 Webpack 非常了解，经验丰富，那么你可以直接跳到下一章了解配置方式。其他同学我建议还是好好阅读这一章，除了真正的基础和入门，我还会分享一些我对 Webpack 的理解和推荐的学习方式。
Webpack 的发家史
大家要知道，任何问题的反面，都是机遇。Webpack 出现之前，如何解决 JS 模块管理，各家都在暗暗角力。当时市面上比较流行的是 Require.js 和 Sea.js，但是最后脱颖而出的，却是 Browserify。只是它的好日子并没有持续很久，因为功能更强大的 Webpack 出现了。
Browserify 和 Webapck 的设计思路比 Require.js 和 Sea.js 高一个层级，Webapck 又比 Browserify 高一个层级。前端开发中的模块管理主要有三个问题：
- 资源太多，手工管理很累
- 过多的资源要消耗很多 HTTP 连接，降低打开速度
- Node.js 有很好用的 NPM 和很多包，前端也想用
Require.js 和 Sea.js 只能解决 JS 中的模块依赖，算是半个(1)；Browserify 可以解决上面的 (2)(3)，Webpack 则都能解决。
所以 Webpack 面世后迅速成为大家的首选。
Webpack 的设计思路
首先，要有一个管理所有资源的文件。无疑，JS 最合适。
接下来，这个文件可以引用各种资源，复用 CommonJS 的方式就可以。在准备交由 Webpack 打包的 JS 里，不仅可以 require 其它 JS，还可以 require CSS、甚至是图片、视频。Webpack 会负责把它们放在合适的地方，比如 CSS，一般通过写入 <head> 的方式生效；图片等二进制文件，则是复制到文件夹里，然后给出一个 URL。这个过程由开发者组织各种 loader 来实现。
浏览器肯定无法识别这样改造过的 JS，但是没关系，Webpack 可以生成一份标准的 JS。这个 JS 里：
- 包含所有要用到的模块
- 被引用的资源，如果需要处理，则处理成需要的状态
- 不需要处理的资源，以 URI 的方式引用
如此一来，处理模块、资源就变得非常简单。使用第三方的库也很简单，直接引入，它里面的资源都由 Webpack 负责安排，开发者甚至感觉不到它们的存在。
Loader
Webpack 核心概念之一，用于处理 JS 里导入的依赖。
Loader 支持串联，比如，加载 Stylus 文件最终生成 CSS 的规则多半是这样的：
module.exports = {
module: {
rules: [
{
test: /\.styl$/,
use: [
// style-loader
{ loader: 'style-loader' },
// css-loader
{
loader: 'css-loader',
options: {
modules: true,
},
},
// stylus-loader
{ loader: 'stylus-loader' },
],
},
],
},
};
我们从下往上看：
- 加载 Stylus 文件，由 stylus-loader 负责，将其转化成 CSS
- css-loader 负责加载 css 内容
- style-loader 负责把 css 内容通过
<style>标签插入页面。
Loader 支持参数，具体哪个 loader 支持哪些参数大家可以看具体文档。Loader 还支持手工在 import 时串连，用处不大，我也就不介绍了。
插件
另一核心概念，可以做任何事情，不过本文里基本用来输出内容。
基本思路是使用部署在各个环节的钩子，对内容进行处理。
Webpack 的发展
Webpack 经过多年发展，不仅能够打包 JS，管理依赖，还能对资源进行处理，比如压缩、优化。
Webpack 也在从其它打包工具中吸收营养，比如 Tree shaking，可以把不需要的代码去掉；比如“约定大于配置”，如果你采用最基础的配置，甚至不需要写配置文件。
最基础的 Webpack 配置
一个基础的 Webpack 配置是这样的（即如果你不写配置文件，直接运行 webpack，它默认使用的配置）：
module.exports = {
entry: './src/index.js', // 即前面说的入口，引用了所有资源的 JS 文件
output: {
path: './dist', // 输出目录，其它资源文件也会输出到这里
filename: 'main.js', // 输出文件的文件名
},
mode: 'production', // 模式，主要影响优化选项
};
它只支持 JS 和 JSON 的导入，但是核心概念都具备：有一个入口，有一个出口；所有被引用的资源都会打包到一起，输出到目标文件夹。
只了解这些当然不太够，不过官方文档说的很详细，我觉得也没有必要在这里抄书，大家自己看一下。下一章会讨论具体的用法。
如何学习 Webpack
在我看来，Webpack 并不好学，因为我们能花在上面的时间太少了。基本上，一个项目搭起来，至少要写个半年一年，但是 Webpack 这种基础工具链最多配一天，配好了，可能这半年一年都不会动。等你下次要配的时候，甚至大版本号都变了，必须从头学习……
这是现实问题，我们不需要改变它，只需要适应它。我并不建议大家对 Webpack 这种项目工具学而时习之，我建议大家多多收集类似本文这样的分享，作为快速工具书，在你需要的时候，马上拿出来看一两个小时，然后配好自己的项目，就不用再管了。
换言之，所有购买支持本次分享的同学，你们都是好样的！（谢谢老板！）
当然，如果你在一个很大的团队里，管理很多项目，那么好好研究工具链也是应该的。不过我相信，你到了这个时候，该怎么做，必然心里有数。我的意见仅供参考。