本文共 1901 字,大约阅读时间需要 6 分钟。
笔记-webpack
零、对webpack的看法
1.webpack是一个模块打包工具,使用webpack管理你的模块依赖,并编译输出她们所需要的静态文件,它能够很好地管理、打包web开发中所用到的html、css、js及各种静态文件,让开发过程更加高效。
2.webpack的两大特色:代码分割和模块处理
一、热重启
1.热重启原理:eventsource sse,一旦服务器资源有更新,能够及时通知到客户端,从而实时的反馈到用户界面上。本质上是一个http,通过response流实时推送服务器信息到客户端。链接断开后会持续出发重连。_webpack_hmr:每隔10s推送一条在消息到浏览器
2.实现:
client:创建new EventSource (“/message”),
Server:需要返回类型为text/event-stream的响应头,发送数据以data开头,\n\n结尾;
webpack-dev-server是一个机遇express的web server,监听8080,server内部调用webpack,这样的好处是提供了热加载和热替换的功能;
webpack-hot-middleware和webpack-dev-middleware
3.EventSource和websocket的区别:
1.eventSource本质仍然是http,仅提供服务器端到浏览器端的单向文本传输,不需要心跳链接,链接断开回持续重发链接;
2.websocket是基于TCP的协议,提供双向数据传输,支持二进制,需要心跳链接,断开链接不会重链;
3.EventSource更简洁轻量,WebSocket支持行更好(IE10+)。后者功能更强大一点。
二、特性
1.所有的资源都可以当作一个模块来处理,热替换(不用刷新整个页面),代码拆分和按需加载,拥有灵活的可扩展plugin库和loader模块加载器;
三、如何使用常用插件?
1.HtmlWebpackPlugin的用法及多入口文件配置:作用是依据一个html模版,生成html文件,并将打包后的资源文件自动引入(title:;template:’‘,fileName:‘’,inject:js插入位置等);
2.webpack.optimize.commonsChunkPlugin:抽取公共模块,减小打包体积,例如:vue的源码、jquery的源码等:entry:vendor:[‘react’];plugin:new web pack.optimize.CommonsChunkPlugin({name:’vendor’})
3.loader:
css:解析css代码,在js中通过require方式引入css文件
style:通过style的方式引入 {test:/\.css$/,loader:’style-loader!css-loader’},二者组合能将css代码写入到js文件中
4.将样式抽取成单独的文件,extract-text-webpack-plugin(filename:‘’):
5.url-loader:实现图片文字等的打包,有一个option选项limit属性表示,少于这个限制,则打包成base64,大于的话,就使用file-loader去打包成图片;
6.postcss:实现浏览器兼容,autoprefixer
7.babel:转es
8.hot module replacement:修改代码后,自动刷新实时预览修改后的效果。devServer:{hot:true,inline:true(实时刷新)}
9.ugliifyJsPlugin:压缩js代码
四、与gulp的比较
1.gulp是工具链,可以配合各种插件做js、css压缩,less编译等;而webpack能把项目中的各种js、css文件等打包合并成一个或者多个文件,主要用于模块化方案,
2.侧重点不同,gulp侧重于整个过程的控制管理(像是流水线),通过配置不同的task,构建整个前端开发流程;webpack则侧重于模块打包;并且gulp的打包功能是通过安装gulp-webpack来实现的
3.webpack能够按照模块的依赖关系构建文件组织结构;
--------------------- 作者:兴菲 来源:CSDN 原文:https://blog.csdn.net/u013741921/article/details/78680583?utm_source=copy 版权声明:本文为博主原创文章,转载请附上博文链接!