webpack学习

  1. 云栖社区>
  2. 博客>
  3. 正文

webpack学习

廊桥梦醉 2018-09-21 14:49:00 浏览509
展开阅读全文

跟gulp一样,也是一个模块化的开发工具,是有react(facebook)团队推广的,在webpack中,它认为所有文件都是资源,图片可以看成是资源,js可以看成是资源,css可以被看成资源,模板可以看成是资源等等。所以一切文件都可以作为资源模块加载。

webpack跟gulp一样,也是通过接口文件定义配置,webpack的配置文件叫做webpack.config.js,在webpack建议使用commen.js规范(像node一样书写模块),也支持cmd,和amd规范,但是不建议使用,webpack建议文件是打包的,webpack也是通过node编译的,因此可以像写node一样定义。

一、webpack配置

        一定是定义在接口文件中,module.exports={}

entry:定义html的入口文件,是字符串,表示一个入口文件,是对象,来定义多个入口文件,Key表示发布后的文件名称,Value:入口文件地址

Output:是一个对象,定义发布的地址,Filename定义发布的地址,如果entry是字符串,filename就是文件地址,如果entry是一个对象,filename通过[]模板引入入口文件,我们还可以通过path定义发布的目录

img_d8db7b5d0dacd04117ba16c14ffd678f.png

二、webpack-dev-server

它是webpack的一个服务器,作为一个插件存在,因此使用就需要安装,它跟webpack一样,需要全局安装,并且本地引入,安装完成会提供一个指令webpack-dev-server,当我们执行webpack-dev-server指令之后,会启动一个服务器,默认端口号是8080,我们可以预览我们发布的效果。

三、加载器

在webpack中,一切文件都可以被看成是资源,是资源我们就可以去模块化加载,我们加载js类的资源需要定义加载器(引入加载资源的插件),与模块相关的配置项,定义在module中,module中有一个属性叫loaders定义加载器:属性值是一个数组,一个成员代表一个加载器,test:定义加载资源的特征,是一个正则,loader定义加载器插件,多个插件用!级联。

3.1 css加载器

css文件的特征是。css结尾,css加载插件有两种,style-loader,css-loader

插件需要本地化,不能只安装在全局,将css与js打包,再加载

img_abe10e3be4304939a99d2af58d23c4ed.png

3.2图片加载器

图片也是一种资源,因此图片也可以加载,图片可大可小,如果图片很小,我们最好将他们打包,这样可以减少请求次数,如果图片很大,我们没有必要打包,直接异步加载就可以了。

加载图片的插件是url-loader,它有一个参数叫做limit,来定义图片大小的限制,单位是字节b,limit=2048,大小等译2kb,我们打包(基于h5的base64编码,大于2kb的我们只能异步加载)我们可以在?后面来定义参数,url-loader?limit=2048

img_033501e5fcc040458dd569a34c8a9154.png

四、插件

在webpack中,与模块相关的配置定义在module中,与其他功能(优化:压缩js等等)相关的定义在plugins中,属性值是一个数组,一个成员代表一个插件项

压缩js插件

由于压缩js插件很常见,因此已经被webpack内置了,我们可以通过webpack模块获取,我们可以在optimize中找到uglifyJsPlugin,它是一个类,因此我们需要实例化

img_7aebe68cd2d3f167e40db07c49937ba5.png
img_98f1b9d5efde6fe40ba5d11ee5671b89.png

网友评论

登录后评论
0/500
评论
廊桥梦醉
+ 关注