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的一个功能，他能够使得代码修改事后不用刷新浏览器就能够更新，是高级版的自动刷新浏览器（将代码从新执行而不总体刷新浏览器）
- 优化问题
正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）
-
往期好文推荐：css