webpack 基本配置

5大核心概念

1、entry （入口）：指示 webpack 从哪个文件开始打包。

2、output（输出）：指示 webpack 打包完的文件输出到哪里去，如何命名等。

3、loader（加载器）：webpack 本身只能处理 js、json 等资源，其它资源需要借助 loader，webpack 才能解析。

4、plugins（插件）：扩展 webpack 的功能。

5、mode（模式）：主要有 开发模式development 和 生产模式product 两种。

准备 webpack 配置文件

开发模式介绍

开发模式就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

1、编译代码，使浏览器能识别运行

开发时我们有样式资源、字体图标、图片资源、html资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

2、代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮。

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观
 

处理样式资源

本章节学习使用 webpack 如何处理 css、less、sass、style 样式资源

介绍

webpack 本身是不能识别样式资源的，所以我们需要借助 loader 来帮助 webpack 解析样式资源。

我们找 loader 都应该去官方文档中找到对应的 loader， 然后使用

一、处理 Css 资源

1、下载包

npm i css-loader style-loader -D

注意：需要下载两个 loader

2、功能介绍

• css-loader：负责将 css 文件编译成 webpack 能识别的模块；
• style-loader：会动态创建一个 style 标签，里面放置 webpack 中 css 模块内容；

此时样式就会以 style 标签的形式在页面上生效。

处理 Less 资源

1、下载包

npm i less-loader -D

2、功能介绍

less-loader：负责将 less 文件编译成 css文件

处理 Sass 和 Scss 资源

1、下载包

npm i sass-loader sass -D

（注意需要下载两个）

2、功能介绍

• sass-loader：负责将 Sass 文件编译成 css 文件；
• sass：sass-loader 依赖 sass 进行编译；

二、处理图片资源

过去在 webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理；

现在 webpack5 已经将两个 loader 功能内置到 webpack 里了，我们只需要简单配置 即可处理图片资源。

性能优化：将小于10kb的图片通过 asset 转换成 bese64，减少请求次数。

三、自动清空上次打包的内容

四、处理字体图标资源

五、处理其它资源

六、处理 js 资源

有人可能会问，js 资源 webpack 不是已经处理了吗，为什么我们还要处理呢？

原因是 webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 浏览器运行，所以我们希望做一些兼容性处理。

其次开发中，团队代码格式是有严格要求的，我们不能由肉眼去检测代码的格式，需要使用专业的工具来检测。

• 针对 js 兼容性处理，我们使用 Babel 来完成
• 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在有 Babel 做代码兼容性处理

1、配置文件

2、具体配置

3、在 webpack 中使用

插件需要引入才能使用

七、Babel

javascript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 javascript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

3、在 webpack 中使用

八、处理 html 资源

手动引入改成自动引入

九、开发服务器 & 自动化

在开发模式中：不会输出资源，在内存中编译打包的

十、生产模式

10.1、CSS 处理

10.2、CSS 兼容性处理

10.3、CSS 压缩