1. 名词解释

1.1 entry

入口文件，webpack 打包的起始文件，可以是单个文件，也可以是多个文件

1.2 output

告诉webpack输出文件的位置，以及怎么命名

1.3 loader

webpack只能处理js 或者json，通过loader webpack可以处理其他的文件。比如css这种
写在module.rules中 test属性描述处理类型的文件，use属性描述使用的loader，从右到左执行

1.4 plugin

应该是添加插件的实例对象，放在plugins数组中

1.5 mode

mode用于设置webpack的运行模式，可以是development或者production或者none

1.6 补充

  • webpack打包出来的文件默认是es5的，但是你如果用了promise等es6的语法，那么就需要添加polyfill（补丁），但是webpack 并没有提供转换代码的能力，是需要你手动提供plugin或者loader来实现
  • Webpack 能打包，但不会帮你补 Promise；你用了动态 import，就必须自己给老浏览器补 Promise，否则会直接炸

2. entry 的详细讲解

2.1 单入口

  • 写法：entry: './src/index.js' 完整的写法是 entry: { main: './src/index.js' } 前面是简写

2.2 多入口

  • 写法：entry: { app: './src/app.js', adminApp: './src/adminApp.js' }

2.3 多个文件当成一个入口组

  • 写法：entry: ['./src/app.js', './src/adminApp.js']

  • 这种写法会创建一个虚拟入口，然后把数组中的文件require进去作为依赖

2.5 library [ˈlaɪbrəri] 属性

  • library 的作用是：把你打包出来的代码“导出成一个可被外部使用的库接口”。
  • 如果没有library，会发生什么？
1
2
3
4
// 比如你打包出来的代码是这样的
(function () {
  // 你的代码
})();
  • 那么这个代码就无法被外部使用，因为外部无法访问到这个代码中的变量和函数
    如果你设置了library，那么这个代码就会被包装成一个可被外部使用的库接口，比如：
1
2
3
4
5
window.MyLib = {
  add: function (a, b) {
    return a + b;
  },
};

2.6 webpack 怎么打包的

  1. 构建 module graph: webpack 会从所有 entry 出发，递归解析依赖，把所有“可达的模块”构建成一个统一的 module graph
  2. 构建 chunk graph: 在构建完 module graph 之后，webpack 会基于所有 entry 创建初始的 chunks，根据 dependOn、splitChunks、动态 import() 等规则，调整 chunk 之间的关系，以及 module 归属到哪些 chunks
  3. 生成输出文件（assets）: webpack 会根据 chunk graph，将每个 chunk 转换为一个或多个输出文件（assets）

2.7 webpack的加载运行

2.8 runtime 和dependOn

暂时遗留 口径不一 未找到官方文档佐证

--> -->