一,放弃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,里面创建<script src="entry.js"></script>标签。将webapck安装到项目依赖,控制台输入 “npm install webpack --save-dev”回车。待下载完成后,如图3-1,项目中会多出node_modules文件夹和package.json,暂时不用关心 package.json 里的内容是什么。
webpack-test
(2)新建index.js ,内容如图 3-2,
(3)控制台执行" webpack index.js entry.js ",会将 index.js 打包到入口文件 entry.js 如图3-3,在浏览器中查看 如图 3-4,至此,你已经上手webpack基本操作了
(4)看到这里,或许一头雾水,但是,你只要按照 (1)~(3),然后看到页面上出现简单的 <h1>webpack</h1> ,就证明你已经动手做成功了,但是这里会了些什么,感觉什么也不会啊,亟需总结一下,要不前面的就白做了,看官来吧!开始总结了:
1,首先,你全局安装了webpack
2,你又新建了一个web工程,里面只有一个 index.html 和 index.js文件,index.html里面就只引入了一个js文件<script src="entry.js"></script>,index.js里面就一条语句 document.write("<h1>webpack</h1>");
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
(2),修改index.js这个路口文件,内容见图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-3中,index.js中填加了两行代码
require("./dog.js"); //把dog.js引入到此文件
require("./cat.js"); //把cat.js引入到此文件