webpack2 前篇

webpack2 前篇

#webpack

前两天用了一天半时间琢磨了下webpack2，想起去年这时候，面对webpack1那样恶心的文档，前前后后搞了好几次才摸索清楚，那真是吐了。

划重点

其实webpack2这样的工具吧，说复杂不复杂，就是我们的思路一定要清晰，第一天我从早上9点搞到了晚上大概8-9点吧。下午一段时间基本是断片的。本文呢主要还是想跟大家分享下思路和心理历程。

不管你做啥对吧，尤其是写程序，更尤其是复杂的时候。理清思路最为关键，为啥有一段时间我断片了呢？就是思路没了，那几个小时就从把逻辑转换为代码的过程变为了写一行测是一行碰运气的过程

做什么

所以我们先来看看，webpack2要为我们做什么？（本次以vue为例，react换下对应的dependencies就好，react在webpack官网文档上都有配置就不说了）

Dev

1.hot-reload 编译.vue

2.编译sass和es6

3.sourceMap

4.eslint

5.环境变量设置

6.输出错误提示在浏览器上

Build

1.rm dist文件夹并且重新生成

2.文件hash

3.cdn链接补全

4.分离css文件

5.sourceMap

列好了后，我们就可以一个一个突破，首先我们从dev下入手，webpack的dev其实是很好配置的，麻烦得就是Build的切换。

webpack的3个文件

我们知道一般要分webpack.dev，webpack.pro，webpack.base为什么要这样呢？

在我们dev环境下或者是build环境，我们的output、rules、plugin都会很不同！如果写在一起文件会很乱逻辑非常难看懂。这也是为什么vue-cli的build文件夹有那么多个文件的原因。（不得不吐槽下，去年说什么webpack配置比gulp更简单清晰的人不知道怎么想的，明显复杂度不是一个级别了）

下回预告

好像没有什么可以跟你们瞎BB的了。这次过程中我主要实现了两套webpack的配置，我个人认为一种是基础低配版，另一种是标准高配版（基本实现了一个简易的vue-cli配置）。下篇让我们再细说具体配置:）