webpack和babel
2021-03-24 15:04:52 0 举报AI智能生成
前端面试_webpack和babel
作者其他创作
大纲/内容
webpack5
webpack5 主要是内部效率的优化
webpack 基本配置
拆分配置和 merge
webpack 配置一般拆分成3个文件：
- webpack.common.js 用于公共的配置；
- webpack.dev.js 用于开发环境的配置；
- webpack.prod.js 用于生产环境的配置。
引入 webpack-merge，开发环境和生产环境要 merge 上公共配置
启动本地服务
配置项 devServer，安装 webpack-dev-server
devServer.proxy 设置代理，实现跨域
处理 ES6
在 common 里面通过 babel-loader 处理
.babelrc 文件：@babel/preset-env babel 配置的集合
处理样式
common
style-loader 将 css 插入到页面中
css-loader 解析 css
post-loader 处理浏览器兼容性
less-loader 解析 less
css-loader 解析 css
post-loader 处理浏览器兼容性
less-loader 解析 less
loader 的执行顺序是从后往前
postcss-loader 需要加 postcss.config.js 文件，配置 autoprefixer
处理图片
dev
file-loader
prod
url-loader
比较小的图片以 base64 格式产出到 html，减少 http 请求
contentHash
打包代码时，加上 hash（hash 根据文件内容生成，文件内容变 -> hash 变 -> 请求时缓存失效）
webpack 高级配置
相关面试题
前端代码为何要进行构建和打包？
代码层面
- 体积更小（Tree-Shaking、压缩、合并），加载更快
- 编译高级语言或语法（TS、ES6+、模块化、scss）
- 兼容性和错误检查（polyfill、postcss、eslint）
研发流程层面
- 统一、高效的开发环境
- 统一的构建流程和产出标准
- 集成公司规范（提测、上线等）
module chunk bundle 分别是什么意思，有何区别？
module：各个源码文件，webpack 中一切皆模块
chunk：多模块合成的，如 entry import() splitChunk
bundle：最终的输出文件
chunk：多模块合成的，如 entry import() splitChunk
bundle：最终的输出文件
loder 和 plugin 的区别？
loader：模块转换器，如 less -> css
plugin：扩展插件，如 HtmlWebpackPlugin
plugin：扩展插件，如 HtmlWebpackPlugin
常见的 loader 和 plugin 有哪些？
loaders
plugins
babel 和 webpack 的区别
babel：JS 新语法编译工具，不关注模块化
webpack：打包构建工具，是多个 loader plugin 的集合
webpack：打包构建工具，是多个 loader plugin 的集合
如何产出一个 lib?
output.library
babel-polyfill 和 babel-runtime 的区别
babel-polyfill 会污染全局
babel-runtime 不会污染全局（产出第三方 lib 用 babel-runtime）
babel-runtime 不会污染全局（产出第三方 lib 用 babel-runtime）
webpack 如何实现懒加载？
- import()
- 结合 Vue/React 异步组件
- 结合 vue-router/react-router 异步加载路由
为何 Proxy 不能被 Polyfill?
Class 可以用 function 模拟
Promise 可以用 callback 模拟
Proxy 的功能用 Object.defineProperty 无法模拟
Promise 可以用 callback 模拟
Proxy 的功能用 Object.defineProperty 无法模拟
webpack 常见性能优化
优化构建速度
可用于生产环境
- 优化 babel-loader
- IgnorePlugin
- noParse
- happyPack
- ParallelUglifyPlugin
不可用于生成环境
- 自动刷新
- 热更新
- DllPlugin
优化产出代码
- 小图片 base64 编码
- bundle 加 hash
- 懒加载
- 提取公共代码
- 使用 CDN 加速
- IgnorePlugin
- 使用 production
- Scope Hosting
0 条评论
下一页
