记录在webpack中使用 postcss-loader

在开发中可能需要兼容不同浏览器厂商，在webpack5中如何做配置呢？今天来记录一下：

webpack.config.js

安装webpack提供的 css-loader 、postCss、postcss-loader 和postcss预设 postcss-preset-env 三个loader、一个插件

PostCSS 用途：

PostCSS 的主要用途包括自动添加浏览器前缀、优化 CSS 代码、支持未来的 CSS 语法等。它提供了一个强大的插件生态系统。

postcss-loader 用途：

它允许在 Webpack 构建过程中使用 PostCSS，在 Webpack 项目中，postcss-loader 可以与其他加载器（如 css-loader 和 style-loader）配合使用，实现对 CSS 的预处理和后处理。

postcss-preset-env用途： postcss-preset-env 是 PostCSS 的一个预设插件集，它允许开发者使用最新的 CSS 特性，并自动将其转译为当前浏览器兼容的 CSS。

webpack解析 loader 的顺序是 从右到左 、从下到上 的顺序；

module.exports={
    ...,
     module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              esModule: false,
              modules: true,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env"]],
              },
            },
          },
        ],
      },
    ],
  },
  ....,

}

如果开启css模块化 modules: true 的js会以如下格式导出，vue中 scoped其实也是利用这一原理；

如果想为某个元素添加类的：

import styles from "./styles/base.css";

let box = document.createElement("div");

box.classList.add(styles.box);

box.innerHTML = "Hello, webpack!";

document.body.appendChild(box);

当然也可以单独创建一个 postcss.config.js来进行管理和配置；

在package.json中需要对浏览器版本进行设置：具体参数请参考

{
"browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}