Webpack相关问题

前端小分队
190 阅读3分钟

目录

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

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

代码层面：

  • 体积更小（Tree-shaking、压缩、合并），加载更快
  • 编译高级语言和语法（TS、ES6、模块化、scss）
  • 兼容性和错误检查（polyfill,postcss,eslint）

研发流程层面：

  • 统一、高效的开发环境
  • 统一的构建流程和产出标准
  • 集成公司构建规范（提测、上线）

module chunk bundle区别

module - 各个源码文件，webpack中一切皆模块
chunk - 多模块合并成的（Chunk是过程中的代码块，Bundle是结果的代码块）

通常我们会弄混这两个概念，以为Chunk就是Bundle，Bundle就是我们最终输出的一个或多个打包文件。确实，大多数情况下，一个Chunk会生产一个Bundle。但有时候也不完全是一对一的关系，比如我们把 devtool配置成'source-map'。然后只有一个入口文件，也不配置代码分割：

 // webpack配置
 entry: {
    main: __dirname + "/app/main.js",
 },
 output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "[name].js", //打包后输出文件的文件名
  },
 devtool: 'source-map',
复制代码

这样的配置，会产生一个Chunk，但是会产生两个bundle，如下图

image

注意到Chunk Names那列，只有main这么一个Chunk，再看Asset这一列，产生了两个bundle，还有一个.map文件。

这就是Chunk和Bundle的区别，Chunk是过程中的代码块，Bundle是结果的代码块。

在 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(它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行任务)

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

  • babel-loader：把 ES6 转换成 ES5
  • css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
  • style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
  • file-loader (png|jpg|jpeg|gif 开发
  • 'url-loader', 生产
  • vue-loader

Plugin:

  • IgnorePlugin 避免引入无用模块
  • HotModuleReplacementPlugin 热更新
  • define-plugin：定义环境变量
  • commons-chunk-plugin：提取公共代码
  • uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码

babel和webpack的区别

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

webpack如何实现懒加载

import()

  • 结合 vue 异步组件 $nexitick
  • 结合vue-router异步加载路由 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
(场景、效果、原理)

相关参考：www.cnblogs.com/fsg6/p/1449…

avatar
文章
阅读
粉丝