webpack5 基础配置（2） postcss使用 file-loader

第一小节讲了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了。