第一小节讲了browserslist的作用,接下里讲Postcss
这个插件有什么用呢？
1 可以通过js来转换css样式如适配，加前缀，css的重置等等
2 postcss本身功能很少，需要借助其他插件。
如何使用呢？
1 查找postcss工具的扩展，比如webpack的postcss-loader，
2 安装对应功能的postcss插件。
先来看基本使用
原生postcss插件需要借助postcss-cli使我们能在命令行控制
cnpm install postcss -D
cnpm install postcss-cli -D
写几个需要前缀的css
转换：npx postcss -o result.css ./src/css/component.css
-o表示输出，将对应的css文件输出到result.css中
输出是输出了，效果没变化，这里报警告了，你没有设置任何插件等，postcss现在啥也不能干，就跟我们上面说的postcss功能很小，但能借助其他插件使其功能壮大。
所以我们需要借助插件如autoprefixer
cnpm install autoprefixer -D
然后再转换
npx postcss --use autoprefixed -o result.css ./src/css/component.css
–use表示用什么插件
转化成功。
借助webpack帮我们使用postcss来转换css，不用我们手动改
postcss-loader，该loader能帮助我们找到使用postcss插件并且转换。
cnpm install postcss-loader -D
使用也很简单，在我们的webpack.config.js文件配置即
只要在我们匹配到css文件的时候就先转换css再去加载，一定要放在最后面，先通过postcss-loader转换，再通过css-loader加载，再通过style-loader渲染。
接着我们执行build,打包一下
好吧，他依然没生效。其实上面已经说了。postcss-loader只是帮我们使用postcss，但是postcss本身功能就不强大，需要依赖其他的插件，所以我们还要继续配置其他插件，如autoprefixer。
这时候就要用上我们配置里面的use对象了。
options属性，用来配置一些东西，里面的postcssOptions才是真正的配置postcss工具的插件，plugins是我们要依赖的插件，可以有多个，所以用数据放，而且依赖使用require(“插件名”)使用。
这样我们就依赖了atuoprefixer,来看看打包效果。
nice,已经帮我们加上了。
顺便提一点，这个postcss工具的适配也是根据browserslist工具找到的浏览器来进行适配的，如果browserslist工具找到的浏览器都支持这个css属性，那么这个css属性不需要加上前缀。后期的babel也都是通过browserslist工具来进行适配。
还有配置，use的配置写法其实是固定的，就是
use:[
{
loader: “”,
options: {
//配置一些插件什么的
}
}
]
大体结构就是这样
postcss-preset-env插件
autoprefixer在各个脚手架的使用较少，大多数都是用postcss-preset-env
看官网，这个插件可以帮我们转换现代的css让各个浏览器都能解析。这个插件也是postcss工具的插件之一，并且其中已经帮我们做了autoprefixer插件做的事，甚至做得更多。比如根据目标浏览器或者运行时环境添加所需的polyfill。
看例子
此时执行build后，我们这八位是没变的，
打包还是八位，所以有些浏览器可能不支持，因此要适配处理。
使用postcss-preset-env
cnpm install postcss-preset-env -D
使用也很简单，由于是插件直接在plugin里面加入依赖就行。
可以看到转换成功。而且我们可以不使用autoprefixer了，因为postcss-preset-env已经内置了autoprefixer了。
可以看到还是会帮我们自动加前缀。
也可以简写
效果一样，运行时还是会转化成requeire("")来运行。
但并不是所有的插件都可以简写，因为有些插件时需要传入额外的参数的，所以有些插件不能简写。
还有less，scss的配置也是需要这些postcss插件的，但是如果每份都写显得冗余，所以我们把它抽离出去。
然后创建 postcss.config.js文件，名字是固定的。
相当于对postcss-loader的options选项写到一个新的文件然后到处，书写依赖的plugins，所有用到postcss-loader的都会来这个文件查找依赖。
build一下
效果不变。
css-loader处理@import属性问题
css代码抽离引入失效问题
但我们将css文件单独抽到另一个文件然后再引入,postcss插件是不起效果的，为什么？因为postcss工具的运行流程是这样的，
一开始根据js文件找到依赖的css文件，然后用postcss-loader处理，接着用css-loader处理，里面的@import是属于css语法，css-loader会进行处理，但是postcss-loader不会。所以当我们走到@import时，此时css-loader发挥作用，继续找到@import引入的那个css文件，但此时最后找到的css文件他只有css-loader和style-loader对其进行处理，并不会回头再使用postcss-loader进行处理，也就是postcss-loader不会对他进行处理，就导致了postcss-loader无效的问题。
解决问题：
配置css-loader的option属性
给options配置上importLoaders属性，这个属性的后面的参数是根据css-loader后面还有多少loader决定的。当为0时，表示找到@import直接使用css-loader处理即可。当为1时，表示往回找第一个loader，也就是我们的postcss-loader去处理，若我们的postcss-loader跟css-loader中间隔了三个loader，就要使用4来找到我们的postcss-loader。
Build一下试试
可以看到依然有用，证明我们配置生效了。如果我们要回头让Less-loader来处理，就得，
写上2就行。
加载和处理其他资源
如图片等等
build试试
老错误了，一看就知道需要loader。
file-loader的作用就是帮助我们处理import/require引入的一个文件资源，并且将这些文件资源一起输出到build，一起打包。
file-loader处理 require回来的是一个对象，{default: 资源}
cnpm install file-loader -D
新的Loader新的规则
这里会报错，因为jsg | png 中间的 | 不隔空格
正常打包成功。
可以看到已经打包成功了。
写法改一下这个。
好了现在可以正常显示了
可以看到图片被正常打包了。
file-loader做的事情非常简单，他对我们的图片进行一个赋值封装打包到build里面，然后我们引入的资源都是打包后的图片。
修改打包后的文件名名字和约束大小
重命名，对file-loader的options属性进行配置
设置name属性即可修改名字。
几个最常用的placeholder（占位符）
【ext】处理的原文件的扩展名。
【name】处理的原图片的名字
【hash】文件的内容，hash值
【hash：length】hash值去长度
【contentHash】 在file-loader返回与hash一样，在其他loader可能不同
【path】 文件相对于webpack配置文件的路径
看打包结果
重命名成功。
图片打包路劲
也是配置file-loader的options属性里面的outputPath属性
打包成功。
也可以这样写，一样的，开发经常这样写。
url-loader
与file-loader类似，但是可以将较小的文件，转成base64的URl。
打包后，url-loader会将图片转成base64,内嵌入js文件中，打包时成功的，只不过打包入js了。
图片正常显示，但是会转成base64。
优缺点：小的图片转成base64，大的图片原样复制过去就行，不然大的图片太大，打包后的js也会变成非常大，到时候请求就非常慢。
file-loader就是更多的http请求，但是url-loader就是会造成js文件太大。所以小的图片就转，大的图片就请求。
所以我们要配置另一个属性limit,这个属性顾名思义就是超出限制我不转换，小于限制我就转换。
100kb以下转换。
已经被转化了。
木有转换。这就是limit的用处。
webpack5后面其实不需要file-loader和url-loader了。
转载：https://blog.csdn.net/lin_fightin/article/details/115098438