Webpack 基础知识
Webpack 相关问题
Webpack 优化
Webpack 实现

webpack

基础概念

webpack_require

webpack_exports

hash chunkhash contenthash 区别

• hash 整个文件任何代码发生改变 hash 就会改变
• contenthash 自身内容发生改变 才会改变
• chunkhash 同一个 chunk 有发生改变，都会改变

bundle、module、chunk 的区别

• bundle：一个入口文件打包后的文件，
• 每一个文件都是一个 module
• bundle 里的 eval 都是一个 chunk，

webpack_lodaer

webpack插件

webpack_sourceMap

webpack_热更新

babel

预设

1.babel-loader 是 webpack 与 babel 的通信桥梁，不会做把 es6 转成 es5 的⼯作，这部分⼯作需要用到 @babel/preset-env来做 2.@babel/preset-env ⾥包含了 es，6，7，8 转 es5 的转换规则

polyfill

默认的 Babel 只⽀持 let 等⼀些基础的特性转换，Promise 等⼀些还有转换过 来，这时候需要借助@babel/polyfill，把 es 的新特性都装进来，来弥补低版本浏览器中缺失的特性

//index.js 顶部
import "@babel/polyfill";

按需加载

//.babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          //目标环境
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11"
        },
        "corejs": 2,//新版本需要指定核⼼库版本
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ]
}
 

useBuiltIns 选项是 babel 7 的新功能，这个选项告诉 babel 如何配置 @babel/polyfill 。 它有三个参数可以使用：

①entry: 需要在 webpack 的⼊⼝⽂件⾥ import “@babel/polyfill” ⼀次。 babel 会根据你的使用情况导⼊垫片，没有使用的功能不会被导⼊相应的垫片。

②usage: 不需要 import ，全⾃动检测，但是要安装 @babel/polyfill 。（试验阶段）

③false: 如果你 import “@babel/polyfill” ，它不会排除掉没有使用的垫片，程序体积会庞⼤。(不推荐)

tree-shaking

MFSU

参考资料

• 基于源码的 Webpack 结构分析