跟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定义发布的目录
二、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打包,再加载
3.2图片加载器
图片也是一种资源,因此图片也可以加载,图片可大可小,如果图片很小,我们最好将他们打包,这样可以减少请求次数,如果图片很大,我们没有必要打包,直接异步加载就可以了。
加载图片的插件是url-loader,它有一个参数叫做limit,来定义图片大小的限制,单位是字节b,limit=2048,大小等译2kb,我们打包(基于h5的base64编码,大于2kb的我们只能异步加载)我们可以在?后面来定义参数,url-loader?limit=2048
四、插件
在webpack中,与模块相关的配置定义在module中,与其他功能(优化:压缩js等等)相关的定义在plugins中,属性值是一个数组,一个成员代表一个插件项
压缩js插件
由于压缩js插件很常见,因此已经被webpack内置了,我们可以通过webpack模块获取,我们可以在optimize中找到uglifyJsPlugin,它是一个类,因此我们需要实例化