webpack

Webpack考点「八」-- 常见面试题 ***

2021-02-04  本文已影响0人  loushumei

目录

前端为什么要进行打包和构建?
module chunk bundle区别
loader和plugin的区别
babel和webpack的区别
webpack如何实现懒加载
如何产出一个lib
babel-polyfill babel-runtime区别
为什么proxy不能被polyfill
webpack优化构建速度
webpack优化产出代码

前端为什么要进行打包和构建?

代码层面:

研发流程层面:

module chunk bundle区别

module - 各个源码文件,webpack中一切皆模块
chunk - 多模块合并成的

在 entry import() splitChunks 都可以定义chunk:

entry: {
  index: path.join(srcPath, 'index.js'),
  other: path.join(srcPath, 'other.js')
},
import('./***/djdj.js').then(res=>{
  console.log(res.data)
})
// splitChunks 代码分割;HtmlWebpackPlugin引用 chunk
bundle -最终输出文件

loader和plugin的区别

loader 模块转换器 (less->css)
plugin 是扩展插件,如HtmlWebpackPlugin

常见的loader和plugin有哪些?
Loader:

Plugin:

babel和webpack的区别

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

webpack如何实现懒加载

import()

如何产出一个lib

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

babel-polyfill babel-runtime 区别

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

为什么 Proxy 不能被 Polyfill

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

webpack优化构建速度

生产环境:
babel-loader
IgnorePlugin
noParse
happyPack
ParallelUglifyPlugin

不能用于生产环境:
自动刷新
热更新
DllPlugin

webpack优化产出代码

小图片base64编码
bundle加hash
懒加载
提取公共代码
使用cdn加速
IgnorePlugin
使用production
Scope Hosting
(场景、效果、原理)

上一篇 下一篇

猜你喜欢

热点阅读