【webpack5】基础

1.webpack只能处理js，json等文件，不能处理css，less，scss，stylus，图片等文件，所以需要对应的loader进行处理
2.webpack4使用url-loader和file-loader进行图片的处理，webpack5已经内置了，无需配置就能处理图片，如需要转化成base64则需要另外配置

3.打包后的文件，怎么js一个路径，图片一个路径：

[hash:10]待变hash只取前十位
[name]会取原文件的名称，所以一般是/imgs/[name][hash:10][ext][query]
4.打包命令执行时，自动删除上次打包的文件
webpack4需要安装插件
webpack5已经内置，可直接配置

5.iconfot使用的字体文件wof/ttf文件不需要转，直接输出就行
type:asset会转base64
type:asset/resource不转，直接输出

6.处理音频视频

7.处理js资源

7.1eslint




eslint的官方规则文档：
https://eslint.nodejs.cn/docs/latest/rules

7.2使用eslint
eslint在webpack4是loader在webpack5是plugin

注意：插件和loader不同之处：都需要安装，但是loader安装之后可以直接配置使用，plugin还需要引入，再配置使用

vscode插件

这个插件会检查打包后的js文件中的代码，所以需要改配置
创建.eslintignore

7.3 babel


bable是一个loader

安装好了开始配置：

8.处理html资源

只安装html-webpack-plugin然后配置后，打包后发现，打包后的index.html中能自动引入打包后的main.js文件，但是index.html文件中的dom结构没有了
所以需要做处理：

dev-server另一个功能，代码变化之后，自动打包

没devserver之前打包命令 npx webpack
使用devserver之后的打包命令刚npx weboack serve

指定配置文件的路径并运行

上边的指令都是比较长的 使用起来比较麻烦，所以都是再package.json中定义指令

使用npm start/npm run dev

9.处理css文件
为什么要把css抽取成单独的文件？
因为抽取成单独的文件可以在html的头部引入link，边解析dom边解析css，渲染速度很快，不单独抽取就会把样式打包进js文件，然后执行js的时候动态创建style标签。造成了2个问题:1.js文件过大影响加载速度2.script标签都是放于最末尾，所以会导致渲染速度变慢，且html已经解析很多的时候，加载样式会出现闪屏现象


并且在所有的使用style-loader的地方用插件替换掉

按此种方式配置好之后，打包后的位置默认在根路径，名字为main.css
若需要指定文件路径和名称需要

至于为什么打包后的index.html文件中会引入改css文件，使用为前边的html-webpack-plugin插件的作用，同样该插件也会引入js文件

9.2css兼容性处理
若想要单独创建postcss-loader的配置文件postcss.config.js，webpack会自动识别
postcss-preset-env包含了autoprefix

封装一个loader函数，复用代码，减少代码量

压缩css代码：

这个插件可放plugins数组里面，也可放和plugins属性同级的optimization属性里面
压缩会使css代码变成一行
生产模式下，js和html文件会进行压缩（变成一行），html压缩的另一个前提是使用了html-webpack-plugin