Webpack 从放弃到开始

一，放弃webpack

开始入手可能会觉得很乱，东西太多，就是一锅大杂烩，当然也有很多前端大神会觉得这工具用起来很简单方便。如果之前有用过 browsersync ,gulp等工具，甚至觉得这只是个重复的轮子，完全没有必要啊，我之前的工具用得好好的，干嘛要学它呢？好吧，之前做组装一张桌子需要准备锤子，多种规格的钉子，多种规格的螺丝刀，多种规格的螺丝和螺帽，钻孔器等等，但是你都觉得很简单，因为你都知道这些工具放在那些地方，很容易你就找到了，现在给你一个工具箱，里面什么都准备好了，可能反而觉得不习惯，有些工具你都没有用过，看上去用起来挺费力的。

---

二，webpack准备工作（windows平台）

不要再犹豫了，开始上手webpack这个工具箱吧，里面的工具用起来可没有你想象的难哦。

（1）安装nodejs：
到node中文网（http://nodejs.cn/），直接下载最新版本一路点过去就可以了

（2）安装cnpm：
nodejs安装完是已经带来npm的，但是国内的网络环境你懂的，为了不出故障安装cnpm吧。打开控制台（WIN+R : 输入cmd，回车），控制台输入“npm install cnpm -g” 回车

（3）全局安装webpack：
依然控制台 “cnpm install webpack -g” 回车

到此，全局准备工作完成

---

三，开始使用webpack

（1）建立一个webpack工程和index.html,里面创建标签。将webapck安装到项目依赖，控制台输入 “npm install webpack --save-dev”回车。待下载完成后，如图3-1，项目中会多出node_modules文件夹和package.json，暂时不用关心 package.json 里的内容是什么。

webpack-test

3-1

（2）新建index.js ，内容如图 3-2，

3-2

（3）控制台执行" webpack index.js entry.js "，会将 index.js 打包到入口文件 entry.js 如图3-3,在浏览器中查看 如图 3-4，至此，你已经上手webpack基本操作了

3-3

3-4

（4）看到这里，或许一头雾水，但是，你只要按照 （1）～（3），然后看到页面上出现简单的

webpack

,就证明你已经动手做成功了，但是这里会了些什么，感觉什么也不会啊，亟需总结一下，要不前面的就白做了，看官来吧！开始总结了：

1，首先，你全局安装了webpack 

2，你又新建了一个web工程，里面只有一个 index.html 和 index.js文件,index.html里面就只引入了一个js文件，index.js里面就一条语句 document.write("

webpack

");

3，你局部安装了webpack项目依赖，记住控制台命令：npm install webpack --save-dev

4，然后你想到，现在有了两个文件是你自己创建的，一个index.js,一个index.html，但是index.html中没有引入index.js而是引入的entry.js，当你在浏览器中打开index.html只会得到一片空白，所以需要一个entry.js文件帮助你走一条弯路，把index.js中的代码打包放到entry.js中你的index.html才能享用到index.js中的代码，那webpack就帮你连通了这条弯路，记住控制台命令 webpack index.js entry.js，它的意思就是把 index.js 打包到 entry.js中。最后你运行index.html，没有任何惊喜的发现“咦！index.js的代码果然到了entry.js上面”,但是这条弯路有什么用呢？

三，webpack做甚

先不管上面那条弯路做甚的问题，重新来制造个新问题，上面只有index.js文件是你自己写的js文件，entry.js是webpack生成的，那么我有很多很多的js文件，我要实现很多很多的功能，怎么办了？这里解释下，我们index.js看做一个入口，是index.html访问所有你自己写的js文件的入口，但是这个入口不能够直接访问，需要加工后才能访问，我们把index.js加工成 entry.js ，这样子index.html就可以通过entry.js访问到所有关联到的js文件，这里说到关联，又是一个问题，什么是关联？为什么会有关联？一个一个功能模块之间有相互关系就叫关联，A功能模块要用到B功能模块的功能就需要A功能模块关联B功能模块，先不管什么AMD，CMD规范，阅读此文不需要那么多专业名字。动手做就行了，又开始动手了。

（1）新建两个js文件，dog.js和cat.js，里面的内容见图4-1和4-2

4-1

4-2

（2），修改index.js这个路口文件，内容见图4-3

4-3

（3）控制台“ webpack index.js entry.js ” 然后到浏览器中看index.html的效果，见图4-4,发现dog.js和cat.js包括index.js中的代码全部打包到entry.js中了，index.html中具备了index.js、cat.js、dog.js的全部代码功能

4-4

（4）开始答疑了：

看到图4-3中，index.js中填加了两行代码
require("./dog.js");   //把dog.js引入到此文件
require("./cat.js");   //把cat.js引入到此文件