# PostCSS 工具

# 什么是 PostCSS

PostCSS 是一个通过 JavaScript 来转换样式的工具，这个工具可以帮助我们进行一些 CSS 的转换和适配，比如自动添加浏览器前缀、css 样式的重置。但是实现这些工具，我们需要借助于 PostCSS 对应的插件。主要用来处理浏览器兼容性问题。

安装 PostCss：

npm install postcss postcss-cli -D

使用：在 webpack 的配置文件中编写相应的 loader 规则，或者直接在命令行中使用。

因为 postcss 是独立于 webpack 的，所以在 webpack.config.js 中配置 postcss 前需要安装相应 loader ：

npm install postcss-loader -D

配置：

	// webpack.config.js -> modules -> rules -> use
	{
	loader: "postcss-loader",
	options: {
	postcssOptions: {
	plugins: [
	require('autoprefixer')
	]
	}
	}
	}

# autoprefixer

autoprefixer 可以帮助我们生成兼容各种浏览器的 css 代码，它的主要作用就是给 css 代码添加上相应的浏览器前缀。如：

	/* autoprefixer 处理前 */
	:fullscreen {
	color: red;
	}
	.content {
	user-select: none;
	}

	/* autoprefixer 处理后 */
	:-ms-fullscreen {
	}
	:fullscreen {
	}
	.content {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

安装 autoprefixer ：

npm install autoprefixer -D

单独配置 autoprefixer 在 postcss.config.js 中配置：

	// postcss.config.js
	module.exports = {
	plugins: [
	require("autoprefixer")
	]
	}

# postcss-preset-env

postcss-preset-env 也是一个 postcss 的插件。它可以帮助我们将一些现代的 CSS 特性，转成大多数浏览器认识的 CSS，并且会根据目标浏览器或者运行时环境添加所需的 polyfill。也包括会自动帮助我们添加 autoprefixer（所以相当于已经内置了 autoprefixer）。

安装 postcss-preset-env ：

npm install postcss-preset-env -D

配置 postcss-preset-env ：

	// postcss.config.js
	module.exports = {
	plugins: [
	require("postcss-preset-env")
	]
	}

# 加载和处理其它资源

# file-loader

file-loader 的作用就是帮助我们处理 import/require() 方式引入的一个文件资源，并且会将它放到我们输出的文件夹中。

安装 file-loader ：

npm install file-loader -D

配置 file-loader ：

	// webpack.config.js -> modules -> rules
	{
	test: /\.(png\|jpe?g\|gif\|svg)$/i,
	use: {
	loader: "file-loader"
	}
	}

有时候我们处理后的文件名称按照一定的规则进行显示：比如保留原来的文件名、扩展名，同时为了防止重复，包含一个 hash 值等。这个时候我们可以使用 PlaceHolders 来完成，webpack 给我们提供了大量的 PlaceHolders 来显示不同的内容。

常用的 placeholder：

[ext]：处理文件的扩展名
[name]：处理文件的名称
[hash]：文件的内容，使用 MD4 的散列函数处理，生成的一个 128 位的 hash 值（32 个十六进制）
[contentHash]：在 file-loader 中和 [hash] 结果是一致的（在 webpack 的一些其他地方不一样，后面会讲到）
[hash:<length>]：截图 hash 的长度，默认 32 个字符太长了
[path]：文件相对于 webpack 配置文件的路径

例如将图片文件输出到 /img 下，并且用 文件原名 + hash值前8位 + 扩展名 命名打包好的图片文件。

	// webpack.config.js -> modules -> rules
	{
	test: /\.(png\|jpe?g\|gif\|svg)$/i,
	use: {
	loader: "file-loader",
	// 写法一
	options: {
	name: "img/[name].[hash:8].[ext]"
	}
	// 写法二
	/*
	options: {
	name: "img/[name].[hash:8].[ext]",
	outputPath: "img"
	}
	*/
	}
	}

# url-loader

url-loader 和 file-loader 的工作方式是相似的，但是可以将较小的文件，转成 base64 的 URI。

安装 url-loader ：

npm install url-loader -D

配置 url-loader ：

	// webpack.config.js -> modules -> rules
	{
	test: /\.(png\|jpe?g\|gif\|svg)$/i,
	use: {
	loader: "url-loader",
	options: {
	limit: 100 * 1024, // 仅将 100Kb 一下的图片转换为 base64
	name: "[name].[hash:8].[ext]",
	outputPath: "img"
	}
	}
	}

# asset module type

# 介绍

在 webpack5 之前，加载非 javascript 或 json 资源我们需要使用一些 loader，比如 raw-loader 、url-loader、file-loader 。
在 webpack5 之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些 loader。

资源模块类型 (asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

passet/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现
passet/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现
passet/source 导出资源的源代码。之前通过使用 raw-loader 实现
passet 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现

# 使用

使用 asset module type 我们可以在 rules 中配置：

	// webpack.config.js -> module -> rules
	{
	test: /\.(png\|jpe?g\|svg\|gif)$/i,
	type: "asset/resource"
	}

自定义文件输出路径和文件名：

	// webpack.config.js -> output

	// 方法一
	output: {
	filename: "js/bundle.js",
	path:path.resolve(__dirname,"./dist"),
	assetModuleFilename: "img/[name].[hash:6][ext]"
	}

	// webpack.config.js -> module -> rules

	// 方法二在 rule 中添加一个 generator 属性并设置 filename
	{
	test: /\.(png\|jpe?g\|svg\|gif)$/i,
	type: "asset/resource",
	generator: {
	filename: "img/[name].[hash:6][ext]"
	}
	// 实现 limit 效果
	/*
	parser: {
	dataUrlCondition: {
	maxSize: 100 * 1024
	}
	}
	*/
	}

处理字体文件，用 webpack5 中的 asset/resource 来替代 file-loader ：

	// // webpack.config.js -> module -> rules
	{
	test: /\.(woff2?\|eot\|ttf)$/i,
	type: "asset/resource",
	generator: {
	filename: "font/[name].[hash:6][ext]"
	}
	}

前端