webpack 入门(一)
本来年前就想写关于webpack这部分的,但是放假回家之后就彻底”疯”了,在家一呆就是二十天(话说年假长真是好,不知道羡慕死多少小伙伴),年后来了直接就被拉去封闭了,二脸懵逼啊,说来就来…封闭是上周结束的,周末也没有休息,终于有时间整理下思路,写一下笔记……
webpack介绍
现如今,模块化结构早已成为网站开发的主流,开发网站的主要工作,也不再是自己编写各种功能,而是如何将各种不同的模块组合在一起.但是浏览器本身并不提供模块管理的机制,有时候为了调用每个模块,在页面上加入一大堆的script标签,这样不但丑陋、难以维护,还会产生大量的请求,拖慢了加载速度,影响用户体验.
为了解决这种问题,前端的模块管理器就诞生了,它可以轻松的管理各个脚本之间的依赖关系,同时避免了上诉问题的发生.
我最早接触的前端模块管理工具是RequireJS,后来因为node接触了CommonJS,但是CommonJS主要是为了js在后端的表现定制的,并不是很适合前端,而RequireJS不但各种参数设置能让人怀疑人生(小弟曾经就被这货折磨的吐血…),而且在实际应用中,还是需要在服务端将所有模块合并之后,在进行统一的加载,这就多出了很多工作量,后来就放弃了.后来也陆陆续续的使用过一些别的工具,都不是很长久,直到webpack的出现.
webpack应该算是一个编译工具,它并不会强制你使用某种模块化方案,而是通过兼容所有所有的模块化方案让你无痛接入项目,用webpack,你可以随意的选择你喜欢的模块化方案,至于怎么处理模块之间的依赖关系及如何按需打包,一切都交给webpack解决吧(就是这么自信).
webpack模块
webpack把所有的文件都视为一个模块,不止是js文件,包括我们的css、ing、xml…甚至是html文件都可单独视为一个模块.所以,我们可以用require或者import(个人比较喜欢es6 的import)将我们的各种文件引进来,进行统一的处理,这样便意味着我们可以将业务更细化,从而达到重复利用的目的.
webpack还能实现按需加载,传统的模块打包工具最终将所有的模块编译生成一个庞大的js文件,有时候会造成js文件过大导致应用很长时间都处于加载中的状态,webpack并不会,它是通过异步加载部分代码以实现按需加载.
webpack文件加载
webpack中,每个文件都是一个资入口文件源(模块),都可以用import(require)导入js,每个入口文件会吧自己所依赖的资源全部打包在一起,而且对于多个入口的情况,还会分贝独立的执行单个入口配置.
webpack安装
默认已经安装了node.js.
全局安装webpack
sudo npm install webpack -g
安装完成之后webpak -v 可以查看版本,到那时4.0以上版本需要安装cli
sudo npm install webpack-cli -g
这样安装成功后就可以查看版本了
webpack -v
安装制定版本
npm install [email protected] —save-dev
安装开发工具
npm install web pack-dev-server —save-dev
结束
本文纯手打，有不当之处请留言！希望能帮到小伙伴们，谢谢！