共计 1703 个字符，预计需要花费 5 分钟才能阅读完成。
前言
这里总结一下，本人在学习 webpack 时，比拟纳闷的中央
1、什么是 webpack?
webpack 是前端模块化打包工具，它把所有都看成模块，比方 css、js、图片文件等都能够看成模块，再通过一些 loader（加载器）和 plugin（插件）对资源进行解决，打包成合乎生产环境的前端资源。
2、为什么须要 webpack?
-
多模块文件依赖，减少代码复用性
传统引入资源相似这种模式，没有模块化关系。
<body> <script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> </body>
引入模块化关系
// mathUntil.js
function sum(num1, num2) {return num1 + num2;}
function mul(num1, num2) {return num1 * num2;}
export {
sum,
mul
}
// main.js
// 应用
const {
sum,
mul
} = require("./js/mathUtil.js")
console.log(sum(10, 20));
console.log(mul(2, 4));
还能够应用 import
// 举个栗子
// a.js
export default function (a, b) {return a + b;}
// index.js
import sum from 'a.js';
// 应用
console.log(sum(1,2))// 3-
打包拓展语言
个别状况下 CSS 的预处理语言 Less、Scss，以及 ES6+ 的一些语法（模块化 import、export 等）, 浏览器还不能间接运行并显示解决，所以须要 webpack 打包成合乎浏览器辨认显示的格局。
- 提供一些功能强大的 loader（加载器）、plugin（插件），缩小代码量或者便于我的项目保护
3、常见的 Loader
- file-loader：把文件输入到一个文件夹中，在代码中通过绝对 URL 去援用输入的文件
- url-loader：和 file-loader 相似，然而能在文件很小的状况下以 base64 的形式把文件内容注入到代码中去
- source-map-loader：加载额定的 Source Map 文件，以不便断点调试
- image-loader：加载并且压缩图片文件
- babel-loader：把 ES6 转换成 ES5
- css-loader：加载 CSS，反对模块化、压缩、文件导入等个性
- style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
- eslint-loader：通过 ESLint 查看 JavaScript 代码
4、常见的 Plugin
- define-plugin：定义环境变量
- commons-chunk-plugin：提取公共代码
- uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
5、webpack 的构建流程
明确 webpack 的构建流程之前，得先理解一下
entry 入口终点
Chunk 能够了解成多个模块合并成的代码块
- 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
- 开始编译：用上一步失去的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 办法开始执行编译；
- 确定入口：依据配置中的 entry 找出所有的入口文件；
- 编译模块：从入口文件登程，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都通过了本步骤的解决；
- 实现模块编译：在通过第 4 步应用 Loader 翻译完所有模块后，失去了每个模块被翻译后的最终内容以及它们之间的依赖关系；
- 输入资源：依据入口和模块之间的依赖关系，组装成一个个蕴含多个模块的 Chunk，再把每个 Chunk 转换成一个独自的文件退出到输入列表，这步是能够批改输入内容的最初机会；
- 输入实现：在确定好输入内容后，依据配置确定输入的门路和文件名，把文件内容写入到文件系统。
正文完
