webpack5基础和开发模式配置
运行环境 nodejs16+
webpack基础
webpack打包输出的文件是bundle
打包就是编译组合
webpack本身功能
仅能编译js文件
开始使用
基本配置
五大核心概念
准备webpack配置文件
1.在根目录
2.命名为webpack.config.js
开发模式介绍
处理样式资源
处理css样式资源文件
因为webpack只能处理js文件
所以要想通过webpack打包css文件则需要在配置文件中引进load
查看官方文档永远是进步最快的方式
Loaders | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)
webpack官方文档中查看load
1.要处理资源首先要创建资源并引入在入口文件
在src文件夹下创建css文件夹下创建css文件
查看文档
安装响应依赖
3.在load中写配置
在加载器模块中的rules数组中加load配置对象
loader中use中数组的执行顺序：从右至左，从上到下
webpackload文档有个毛病，它有时没有安装让所有依赖
处理less资源
创建less文件
入口文件引入
安装依赖
config 加载器配置更改
rules中load的配置
添加数组前的关键字为use可以添加多个loader，loader只能添加一个loader
处理Sass和Scss资源
安装依赖后
添加config加载器配置
sass和scss对应的都是sass文件，
只是两种命名，区别是里面的写法不太一样
sass文件命名可以省略括号和分号
处理Styl（一种预处理器）资源
创建文件
styl 更简洁
入口文件引入
样式资源打包流程
当webpack不识别资源时，通过load加载
样式资源而言，最常用的load是“style-loader”和“css-loader”
其他的预处理器资源 都需要借助loader将预处理器文件编译成css文件
处理图片资源
图片文档：直接搜索：asset
base64优化
修改打包资源的路径 希望不同的资源打包后去向不同的目录
输出的js文件放在dist下的一个js文件夹下
入口文件打包输出文件名 使js文件放在dist下的一个js文件夹下
filename:"static/js/main.js"
图片输出文件位置存放的设置方法在asset文档下
图片输出文件存放位置的设置在config中的图片配置设置中
hash：哈希值
ext：文件拓展名
query：其他参数 url中的查询参数
自动清空上次打包内容
处理字体图标资源
阿里巴巴字体图标库iconfont的使用
在素材库中选择需要的字体图标加入购物车
在购物车中选择添加至项目 并创建新项目
在新项目中选择下载至本地并进行解压
加压后打开demo-index.html(这个文件会显示字体图标的三个用法，兼容性最强是Unicode，使用用法最简单是Font class)
注意将css文件引入项目后，font字体文件也要引入项目
并且要将css文件中的font字体文件目录进行修改
webpack中字体图标的使用
改变字体图标文件的输出路径，则需要进行配置
type：“asset”会将小于某个大小的文件转化为base64字符串
字体图标文件不需要
处理其他资源
处理js资源
Eslint
vue语法的支持需要用到插件
配置文件（最重要）
具体配置过多，掌握基本的，需要查文档
指定语法环境
规则设置方式
规则文档 规则参考 - ESLint - 插件化的 JavaScript 代码检查工具
继承规则
使用eslint
plugin插件中
找到EslintWebpackPlugin模块
插件需要引用才能使用
1.官网查找安装下载插件配置写入
2.创建eslint配置文件
番外：vscode的插件 eslint
自动检测js文件是否符合规范
如果想要对一些文件取消这个插件的使用 创建.eslintignore 文件内写入文件夹名即可
Babel用法
在webpack中使用babel
官方文件
在webpack中文文档的loader中
babel-loader | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)
webpack配置文件中load设置
预设可以写这里面，也可以写babel的配置文件中（易于修改）
配置文件写在webpack配置文件外面易于进行修改
处理html资源
使html文件能够自动引入js资源
官方文件
HtmlWebpackPlugin | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)
下载
在webpack配置文件引入模块
再将插件设置进行修改
自动化
目标：源代码修改后，打包文件自动改变
省去手动重新打包的步骤
下载包
配置
此时指令变为：npx webpack server
开发服务器：不会输出资源，在内存中编译打包
此时dist包下不会生成打包后的文件，但页面效果是存在的
开发环境下配置总结
24-基础-总结开发模式配置_哔哩哔哩_bilibili