什么是webpack
webpack是一个静态资源打包工具，它会以一个或者多个文件作为打包的入口，将整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，可以在浏览器端运行。一般将 webpack 输出的文件称为 bandle 。
webpack 本身的功能也是有限的，一共有两种模式：
开发模式：仅能编译js中 ES Module 语法。
生产模式：可以编译js中 ES Module 语法，还可以压缩 js 代码。
为什么需要打包工具
开发时，一般会使用框架、ES6模块化语法、css预处理器等语法进行开发，这样的代码如果想在浏览器运行必须经过编译，成为浏览器能识别的 js、css 等语法后才能运行。
打包工具就是用来编译代码的。同时还可以压缩代码、做兼容性处理、提升代码性能等。
目前一些常用的打包工具：
Grunt、Gulp、Parcel、Webpack、Vite 等等。
npm 和 npx
npm是用来下载包的
npx 是将node_modules文件夹中的 .bin 目录临时添加为环境变量，这样就可以访问该环境变量下的应用程序
npx的作用如下：
1.默认情况下，首先检查路径中是否存在要执行的包（即在项目中）；
2.如果存在，它将执行；
3.若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它；
假设有一个名为my-package的软件包，想要执行它。
好吧，若没有npx，要执行一个软件包，必须通过其本地路径运行来完成，如下所示：
./node_modules/bin/my-package
或在 package.json文件的 scripts section中将其定义为单独的脚本，如下所示：
{
"name":"something",
"version": "1.0.0",
"scripts": {
"my-package":"./node_modules/bin/my-package"
}
}然后使用npm run my-package运行。
现在，运用npx，只需运行npx my-package.，即可轻松实现此目的。
webpack的配置有哪些？核心概念？
webpack有5大核心概念：
1. entry（入口）指示Webpack从哪个文件开始打包。
2. output（输出）指示Webpack打包完的文件输出到哪里，如何命名等。
3. loader（加载器）webpack本身只能处理 js、json等资源，其他资源需要借助 loader 才能解析。
4. plugins（插件）扩展webpack的功能。
5. mode（模式）开发和生产两种模式 development/production。
⚠️注意：output 中的 path 是全部文件的输出路径；但 filename指的只是入口文件输出后的路径。
clean：true，设置打包前清空
webpack.config.js 文件：
const path = require("path") //固定写法 node中的核心模块，专门用来处理路径问题
//依赖于node中的common.js模块化
module.exports = {
//入口
entry:'./src/main.js',//相对路径
//出口 文件的输出路径 一个对象 包含路径和文件名
output:{
// __dirname node.js中的变量 用来表示当前文件的文件夹目录
path:path.resolve(__dirname,'dist'),//绝对路径
filename:'main.js',
clean:true,//自动清空上次打包的内容，其实就是在打包前，将整个path目录进行清空，再打包
},
//loader 加载器
module:{
rules:[
//loader的配置
],
},
//plugin 插件
plugins:[
//plugin的配置
],
//模式
mode:'development'//或 production
}什么是开发模式
如何处理样式资源
如果需要webpack进行打包，那么必须在入口文件进行引入。
css/less/sass/stylus 都有自己对应的loader，不同的是，如果使用预处理器，预处理器的loader会先将预处理器处理为css文件，然后再继续执行，即将css代码编译成commonjs模块放入js，再将js中的css文件通过创建style标签的方式加入到html中。
1.npm install 需要下载的loader
2.配置方式/内联方式（不推荐）
在webpack.config.js中进行配置：
module.exports = {
module: {
rules: [
{ test: /\.css$/, //只检测.css文件
//执行顺序为从右到左，从下至上
use: [
'style-loader',//将js中css文件通过创建style标签添加到html中生效
'css-loader'//将css代码编译为common.js模块放到js中
]
},
],
},
};3.将需要打包的资源在入口文件引入。
如何进行图片和字体图标处理
webpack4 中通过 file-loader 和 url-loader 进行图片资源的处理，但是在 webpack5 中，已经将两个 loader 内置到 webpack 中了，只需要简单配置。
项目中的图片优化：
习惯将小于10kb的图片转换为base64（DataUri），减少请求，减轻服务器压力。
对于过大的图片，不适合转为base64，因为转为base64文件体积会变大，越大的图片增加的体积越大，导致整体页面的加载速度变慢。
module.exports = {
module: {
rules: [
{ test: /\.(png|jpg|gif)$/, //需要查看的图片后缀
type:"asset",
parser:{
dataUrlCondition:{
//小于10kb的图片转换为base64
maxSize:10*1024,//10kb
},
],
},
};处理字体图标资源
此时不需要进行 base64 的转换，type 类型也是 asset 下的 resource
module.exports = {
module: {
rules: [
{ test: /\.(ttf｜woff2?)$/, //需要查看的图片后缀
type:"asset/resource",
//也是可以设置generator的值
generator:{
filename:"static/media/[hash]/[ext]/[query]",
}
],
},
};怎样操作输出文件的打包目录
当我们希望打包出来的文件不是全部堆砌在.dist目录下，希望进行 js/image 的分级目录时：
output中更改 js 输出后的文件路径：
output:{
path:path.resolve(__dirname,'dist'),//绝对路径
filename:'static/js/main.js',
},module下 rule 中和 asset 同级定义generator文章来源：https://www.toymoban.com/news/detail-668581.html
module: {
rules: [
{ test: /\.(png|jpg|gif)$/, //需要查看的图片后缀
type:"asset",
parser:{
dataUrlCondition:{
//小于10kb的图片转换为base64
maxSize:10*1024,//10kb
},
generator:{
//输出的图片名称
//hash指的是打包完成后，图片会被打包为一串字母数字，此值即为hash值，
//hash值如果觉得太长可以设置为[hash:10],为只取前十位
//ext 指的是文件后缀名
filename:"static/image/[hash]/[ext]/[query]",
}
],
},此时，.dist目录下会有一个static文件夹，static文件夹下有两个文件夹，js文件夹下是打包好的入口文件，image文件夹下是打包好的图片资源。文章来源地址https://www.toymoban.com/news/detail-668581.html
到了这里，关于webpack5（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
