这是我参与「第五届青训营」伴学笔记创作活动的第25天
一、本节课重点内容
在我们学习完 Webpack 是什么之后，本节课将主要学习 Webpack 的部分使用方法，这节课的内容也可以帮助我们完成从理论到实践的过渡，学习能够通过代码展示与案例讲解，了解关于 Webpack 的具体使用方法。
课程重点内容，归纳总结如下所示：
- 流程类配置
- 处理 CSS
- 接入 Bable
- 生成 HTML
- 使用 Webpack - 工具线
二、详细知识点介绍
使用webpack示例：
核心流程：
- 入口处理：从'entry' 文件开始，启动编译流程；
- 依赖解析：从'entry'文件开始，根据'require' or import' 等语句找到依赖资源；
- 资源解析：根据module' 配置，调用资源转移器，将png、css等非标准JS资源转译为JS内容；
- 资源合并打包：将转译后的资源内容合并，打包为可直接在浏览器运行的JS文件； 递归调用2、3，直到所有资源处理完毕
模块化——一致性
- 多个文件资源合并成一个，减少http 请求数
- 支持模块化开发欧6
- 支持高级JS特性
- 支持Typescript、CoffeeScript方言
- 统一图片、CSS、字体等其它资源的处理模型
- Etc
使用Webpack
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:
- 流程类:作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类:主流程之外，提供更多工程化能力的配置项
使用Webpack配置总览：
使用webpack的方式：
使用Webpack _处理 CSS：webpack不能直接将css进行打包。
要想处理css样式文件，需要使用到loader。
loader让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用。
我们处理css文件就需要使用到css-loader和style-loader来进行处理。
三、总结
本次学习让我明白了如何进行webpack基础的配置来满足我们的开发要求，以及我们应该如何使用webpack来处理css样式文件，我们需要先引入webpack的包的文件进行基础的配置，然后再将css打包到页面的基础的style标签中，之后，我们可以试着使用link标签将其引入，来完成处理css文件的目的。
