开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
前言
这一篇文章主要讲解了webpack的五大核心概念及其配置方法，以及一些资源样式的处理！
5大核心概念
| 标题 | 描述 |
|---|---|
| entry(入口) | 指webpack从那个文件开始打包 |
| output(输出) | 指webpack打包完成后的文件输出到哪里 |
| loader | webpack本身只能够处理js、JSON等资源，其他需要借助loader才可以进行解析 |
| plugins | 扩展 Webpack 的功能 |
| mode | 分为两种 开发模式：development 生产模式：production |
新建webpack配置文件
在根目录创建一个webpack.config.js文件，内容如下,Webpack是基于 Node.js 运行的，所以采用 Common.js 模块化规范
// webpack.config.js
const path = require('path')
module.exports = {
// entry 入口 指webpack从那个文件开始打包
// 相对路径或绝对路径都可以
entry:'./src/main.js',
// output 输出 指webpack打包完成后的文件输出到哪里
output:{
// path：文件输出的目录，必须是绝对路径
path:path.resolve(__dirname,'dist'),
// filename:输出文件名
filename:'main.js'
},
// loader 加载器 webpack本身只能够处理js、JSON等资源，其他需要借助loader才可以进行解析
module:{
rules:[]
},
// plugins 插件 扩展webpack资源
plugins:[],
// mode 模式 开发者模式 development 生产者模式 production
mode:'development'
}
运行
有了webpack.config.js文件之后在运行，就不在需要npx webpack ./src/main.js --mode=development这样运行了,只需要直接执行npx webpack就可以完成同样的操作。
开发者模式
开发模式就是我们开发代码时使用的模式，这个模式下我们主要做两件事:
- 编译代码，使浏览器能识别运行
- 开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
- 代码质量检查，树立代码规范
- 提前检查代码的一些隐患，让代码运行时能更加健壮。
- 提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。
处理样式资源
因为webpack本身是不能够识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源,那么就需要自己找Loader来辅助进行代码编译，我们可以在webpack官方loader进行搜索查询，找到自己需要的loader进行安转配置使用！
处理css资源
首先第一步需要进行安装loader
css-loader：负责将css文件编译成 Webpack 能识别的模块style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 css 模块内容,此时样式就会以 Style 标签的形式在页面上生效
npm i css-loader style-loader -D
注意:在webpack提供的官方loader中,安装命令都只有一个loader，所以需要看一下use中写了几个就安装几个，否则在运行的时候会报错！
loader安装完成之后,还需要在webpack.config.js中进行配置，如下：
// webpack.config.js
......
module:{
rules:[
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
]
},
......
配置完成之后就webpack就可以识别css资源,顺利进行打包了。
处理 Sass 和 Scss 资源
sass-loader：负责将 Sass 文件编译成 css 文件sass：sass-loader依赖sass进行编译
npm i sass-loader sass -D
......
{
test: /.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
}
......
处理图片资源
Webpack4 我们处理图片资源通过 file-loader 和 url-loader 进行处理，现在Webpack5已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源
{
test: /.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 对小于10kb的图片会被转换成base64格式
}
}
}
我们也可以添加parser对图片进行一些优化 : 将小于某个大小的图片转化成 data URI 形式（Base64 格式）,这样做的优点就是可以减少请求量，缺点就是会文件会变大。
小结
以更文促进学，持续不断进步,加油，专注你的梦想，做自己的英雄！
