这是我参与「第五届青训营」伴学笔记创作活动的第 13 天

Webpack知识体系

新手知识点：

GitMind

核心概念：

入口(entry)

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

输出(output)

告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，

loader

去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，

插件(plugins)

被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

webpack是什么？

是一种前端资源编译、打包工具

webpack的特点

多份资源文件打包成一个Bundle支持
Babel、Eslint、TS、CoffeScript、 Less、Sass
支持模块化处理css、图片等资源文件
支持HMR＋开发服务器
支持持续监听、持续构建
支持代码分离
支持 Tree-shaking
支持Sourcemap

如何使用webpack?

webpack使用起来其实就是一个工具，几乎所有的操作都是在webpack.config.js文件中操作的。

1.示例

安装 npm i webpack webpack-cli

2.配置文件

3. 执行编译命令 npx webpack

打包流程

入口处理
- 从entry的文件开始，启动编译流程
依赖解析
- 从entry文件开始，根据require or import等语句找到依赖资源
资源解析
- 根据module配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容
资源合并打包
- 将转译后的资源内容合并打包为可直接在浏览器运行的JS文件（递归调用2、3直到所有资源处理完毕）

优点

多个文件资源合并成一个，减少http请求数
支持模块化开发
支持高级JS特性
支持Typescript、CoffeeScript方言
统一图片、css、字体等其它资源的处理模型
Etc. ..

使用Webpack

关于Webpack的使用方法，基本都围绕配置"展开，而这些配置大致可划分为两类:

流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项

流程类配置

处理css

首先我们需要安装loader npm add -D css-loader style-loader

loader是一个函数，他把我们传入的文件转换成我我们需要的样子

接入Babel

Babel 是一个 JavaScript compiler

Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。更简单的说，Babel可以把使用ES6/ES7等“高级”语法编写的Javascript代码转换为ES5/ES3的“通俗”语法（也可以把JSX语法转为Javascript）。