1️⃣ Webpack 相关

什么是 webpack

  1. Webpack 是一个模块打包器 ( bundler )。
  2. 在 Webpack 看来, 前端的所有资源文件 (js/json/css/img/less/...) 都会作为模块处理
  3. 它将根据模块的依赖关系进行静态分析，生成对应的静态资源

五个核心概念

  1. **Entry：**入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  2. **Output：**output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。
  3. **Loader：**loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只能解析 JavaScript）。
  4. **Plugins：**插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
  5. **Mode：**模式，有生产模式 production 和开发模式 development

理解 Loader

  1. Webpack 本身只能加载 JS/JSON 模块，如果要加载其他类型的文件(模块)，就需要使用对应的 loader 进行转换/加载
  2. Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
  3. 它本身是一个函数，接受源文件作为参数，返回转换的结果
  4. loader 一般以 xxx-loader 的方式命名，xxx 代表了这个 loader 要做的转换功能，比如 json-loader。

理解 Plugins

  1. 插件可以完成一些 loader 不能完成的功能。
  2. 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

配置文件(默认)
webpack.config.js : 是一个 node 模块，返回一个 json 格式的配置信息对象

1️⃣ Webpack 原理和概念

树结构 : 在一个入口文件中引入所有资源, 形成所有依赖关系树状图
模块 : 模块就是模块可以是 ES6 模块也可以是 commonJS 或者 AMD 模块, 对于 webpack 来说, 一切皆模块
chunk : 打包过程中被操作的模块文件叫做 chunk 例如异步加载一个模块就是 chunk
bundle : bundle是最后打包后的文件, 最终文件可以和 chunk 一样, 但是大部分情况下 bundle是多个 chunk 的集合
为了优化最后生产出的 bundle数量可能不等于 chunk 的数量, 因为有可能多个 chunk 被组合到一个 bundle中