前端面经-webpack

笔记-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能够按照模块的依赖关系构建文件组织结构；