尝试了webpack，收获很大

在学前端的过程中，一直对文件的引入有疑问，感觉如果只是把<script>、<style>堆叠在一起的话很混乱，尽管可以写注释，但引入文件一多还是容易傻傻分不清。

后来逐渐了解到前端要想应用化，那么各种资源的加载就会变得复杂，这时就需要模块化。

查看一番后，了解到主要有CommonJS这种同步模块化规范和AMD这种异步模块化规范。前者多用于服务端，后者则是客户端，只不过不是绝对的，CommonJS也有面对客户端的实现Browserify，AMD也有面向服务端的实现RequireJS（同时也用于客户端）。还有CMD，UMD，ES6模块，这里不深入展开。

那么大概就是这么一个情况。之后又知道了webpack，到处都能看到对它的介绍，最近开始着手学习，偶遇了一个简洁，精炼的webpack教程（Webpack 中文指南）。

教程开头简单回顾了一下前端模块化过程后，提到了期望的模块系统是什么样子：

可以兼容多种模块风格，尽量可以利用已有的代码，不仅仅只是 JavaScript 模块化，还有 CSS、图片、字体等资源也需要模块化。

之后就开始提及webpack是如何满足了这些期望，更多细节教程里可见。

简单跟着教程里的最简项目使用了一下webpack后，我理解的模块结构大致如下（没研究过原理，教程也没讲，所以很可能是错的）：

最上面的bundle.js文件是最终所有模块被编译后的汇总模块，而entry.js则类似html文件里的index.html文件，是一个初始文件，或者说主页面文件，其他的功能模块，比如图里最下面的module1，module2，module3 ，都在entry.js里用require引入。至于entry.js和bundle.js的关系则是在一个webpack.config.json文件里设置。

至于还有一个loader，也就是加载器或者叫资源转换器则不赘述，参考教程就行，不过这个教程也只是大概介绍并演示一遍使用。

然后，惊喜的来了，webpack的一个功能点使我真正产生了写这篇记录的冲动。到不是这个功能让我完整的领会了webpack，其实就只是一个小功能——观察者模式，它让我体会到了实实在在的效率提升。这个模式可以根据你的代码改动，实时刷新网页上的变动。就这一点就让我感动了。

具体实现就是一行命令。在前面配置好项目结构，写好配置文件后，执行以下命令即可：

当然，使用 webpack-dev-server开发服务是一个更好的选择。

它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack。

在浏览器打开 http://localhost:8080/ 或http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，

并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

安装

$ npm install webpack-dev-server -g

运行

$ webpack-dev-server --progress --colors

其实就是开了个本地服务器，然后监控项目文件的变化，实时编译。但功能虽简单，实际使用时的效率提升真不是一点半点，绝对可以说是数量级的提升。

比如在打开这个模式之后，再在浏览器那输入localhost:8080：

然后我只在一个css模块文件里改动这个背景颜色，从yellow变为blue。

本来是yellow 然后改为blue

刚在编辑器按下保存快捷键command+s，网页也立刻被渲染成了蓝色背景：

背景把之前的字体给遮住了……

不多说了，总之这功能就是很爽……

最后，接下来要做的则是参考更多的教程文章，更好的使用webpack。

比如参考简书的这篇：入门Webpack，看这篇就够了

对上面这篇的补充：补充

补充二

再记录一张webpack运行流程图：

webpack生命周期

完