webpack打包（有面试题）

1.打包入口

entry:{
    “chunkKey”: “”  //使用key扩展性好，清楚的知道入口文件对应的key 
}

2.css文件处理

• 引入css

• css-loader

在较新的版本中使用mini-css-extract-plugin提取css文件

3.本地开发服务器：webpack-dev-server

• 路径重定向，支持https，浏览器中能够显示编译错误，能够进行接口代理，模块热更新

4.Proxy

• 代理远程接口请求

http-proxy-middleware参数：
option：
    target：指定代理的地址，
    changeOrigin：改变源到url，在虚拟主机上颇有用
    headers：增长http请求头，
    logLevel：帮助调试
    pathRewrite：重定向

• 热更新优点：

保持应用的数据状态，节省调试时间，样式调试更快
deServer.hot
webpack.HotModuleReplacementPlugin：经过module.hot来操做，module.hot.accept当依赖更新后执行的回调
webpack.NameModulesplugin清晰相对路径输出

• 代码调试：source Map 调试

设置DevTool的值：

5.优化打包速度

• 分开vender和app--使用插件：DllPlugin和DllReferencePlugin
• UglifyJsPlugin只要传入parallel（平行线程处理）和cache（缓存）参数
• HappyPack，HappyPack.ThreadPool（线程池）
• babel-loader：options.cacheDirectory，include，exclude加入参数提升速度
• 减小resolve，DevTool：去除sourcemap，cache-loader

长缓存优化：从用户填写url访问网页开始，用户浏览器向服务器下载请求资源，服务器可经过控制http响应头，能够告知浏览器某些资源是强缓存，不用更新，这些资源不用更新时，浏览器会从本地加载资源。
解决方式：提取vender，hash->chunkhash,提取webpack runtime

Webpack面试

• Webpack和grunt和gulp有啥不一样：

Webpack是一个模块打包器，grunt和gulp是执行任务的，webpack能够递归的打包项目中的全部模块（递归：指定一个入口，分析模块的依赖，它会递归的查找全部相关的依赖），最终生成几个打包后的文件，他和其余的工具的最大的不一样在于它支持code-splitting（代码分割），模块化（AMD，ESM，CommonJS）开发，全局的分析工具（分析整个项目引入的模块）

• 什么是bundle，什么是chunk，什么是module：

bundle是由webpack打包出来的文件，chunk是指webpack在进行模块依赖分析的时候，代码分割出来的代码块，module是开发中的单个模块

• 什么是loader，什么是plugin：

loader是用来告诉webpack如何转化处理某一类型的文件，而且引入到打包出的文件中
plugin是用来自定义webpack打包过程当中的方式，一个插件是含有apply方法的一个对象，经过这个方法能够参与到整个webpack打包的各个流程（生命周期）

• webpack-dev-server和http服务器如nginx有什么不一样：

webpack-dev-server使用内存来存储webpack开发环境下的打包文件，而且能够使用模块热更新，他比传统的http服务器对开发更加简单高效

• 什么是模块热更新：

模块热更新是webpack的一个功能，他能够使得代码修改事后不用刷新浏览器就能够更新，是高级版的自动刷新浏览器（将代码从新执行而不总体刷新浏览器）

• 优化问题

---

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

• 往期好文推荐：

  • 1.时间戳转换成时间日期格式及去重
  • 2.前端面试之JavaScript（总结）