webpack如何处理浏览器的样式兼容问题postcss

一、准备工作

css/index.css添加样式

.word {color: red;user-select: none;
}

 为了兼容不同的浏览器我们需要添加前缀比如：

-webkit-user-select: none;

这个工作可以通过postcss的插件postcss-preset-env处理

 二、安装依赖

pnpm i -D postcss postcss-loader postcss-preset-env

postcss其他插件可以查看 

PostCSS 插件指南 | PostCSS

三、webpack配置

webpack.config.js

const path = require("path");/*** 类型提示* @type {import("webpack").Configuration}*/
const config = {entry: "./src/index.js",output: {filename: "build.js",path: path.resolve(__dirname, "./build"),},module: {rules: [{test: /\.css$/, //正则匹配文件use: [{loader: "style-loader",},{loader: "css-loader",},{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env"],},},},],},],},
};
module.exports = config;

postcss.config.js

优点是不用重复配置

module.exports = {plugins: [require("postcss-preset-env")],
};

然后打包npm run build，我们的样式就添加了前缀