webpack面试
@ 姜波 | 星期二,七月 21 日,2020 年 | 2 分钟阅读 | 更新于 星期二,七月 21 日,2020 年

前端为何要进行打包和构建

  • 体积更小(Tree-Shaking、压缩、合并),加载更快
  • 编译高级语言或语法(TS、ES6+、模块化、SCSS)
  • 兼容性和错误检查(Polyfill、postcss、eslint)
  • 统一、高效的开发环境
  • 统一的构建流程和产出标准
  • 集成公司构建规范(提测、上线等)

module、chunk、bundle的区别

  • module-各个源码文件,webpack中一切皆模块
  • chunk-多模块合并成的,如entry、import()、splitChunk
  • Bundle-最终的输出文件

loader和plugin区别

  • loader模块转换器、如less->css
  • plugin扩展插件,如HtmlWebpackPlugin

常见loader和plugin

babel和webpack的区别

  • babel-JS新语法编译工具,不关心模块化
  • webpack-打包构建工具,是多个loader、plugin的集合

如何产出一个lib

output: {
  // lib的文件名
  filename: 'lodash.js',
  // 输出lib在dist目录下
  path: distPath,
  // lib的全局变量名
  library: 'lodash'
}

babel-polyfill和babel-runtime的区别

  • babel-polyfill会污染全局
  • babel-runtime不会污染全局
  • 产出第三方lib要用babel-runtime

webpack如何实现懒加载

  • import()
  • 结合Vue、React异步组件
  • 结合Vue-router、React-router异步加载路由

为何Proxy不能被Polyfill

  • 如Class可以用function模拟
  • 如Promise可以用callback来模拟
  • 但Proxy的功能用Object.defineProperty无法模拟

webpack优化构建速度(可用于生产环境)

  • 优化babel-loader
  • IgnorePlugin
  • noParse
  • happyPack
  • ParallelUglifyPlugin

webpack优化构建速度(不用于生产环境)

  • 自动刷新
  • 热更新
  • DllPlugin

webpack优化产出代码

  • 小图片base64
  • bundle加hash
  • 懒加载
  • 提取公共代码
  • 使用CDN加速
  • IgnorePlugin
  • 使用production
  • Scope Hosting

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接