webpack使用postcss，为css自动增加浏览器前缀

首先，安装插件

npm i postcss postcss-loader autoprefixer -D

如果要使用最新版本的postcss-loader话，你需要使用 webpack v5。如果使用 webpack v4 的话，你需要安装 postcss-loader v4。

postcss-loader | webpack 中文文档

如果直接安装了postcss-loader 的最新版本，但是webpack是v4,会报错

ERROR in ./src/css/main.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (C:\workspace\某某项目\node_modules\postcss-loader\dist\index.js:40:24)

使用postcss-loader v4版本的时候，没有postcss.config.js文件也不会报错，但是功能不会实现 

其实运行项目的时候，很多问题都是依赖的版本的问题，应该依次检查

1. node版本

2. webpack版本

3. 插件版本

每个插件在webpack官网都有相关的版本要求的描述概念 | webpack 中文文档webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。https://webpack.docschina.org/concepts/

在webpack.config.js中给css文件或者scss文件，配置module的rules的use  loader

 scss文件也可以使用postcss-loader，而不需要单独安装postcss-scss之类的

// webpack.config.js
module.exports = {
    //...
    module: {
        rules: [
            {
                test: /.js$/,
                use: ['style-loader', 'css-loader', 'postcss-loader'] // postcss-loader要在css-loader之前, 这个时从右向左执行的
            }
        ]
    }
}

在项目根目录，同webpack.config.js的目录下，新建文件postcss.config.js 在里面的配置，由这个文件可见，可以再postcss.config.js配置很多不同的插件,实现不同的功能

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

 这个时候运行还不会生效是因为autoprefixer这个插件要求，需要再package.json中配置browserlist

webpack配置postcss-loader和autoprefixer不生效_LPLIFE的博客-CSDN博客postcss.config.jsmodule.exports = { plugins: [require('autoprefixer')],}webpack.config.js module: { rules: [ //css-loader解析 @import 这种语法 // style-loader 把css插入到head标签中 // loader的顺序，默认是从右向左执行 从下到上执行 // 格式：[] / [{loader:''}https://blog.csdn.net/LPLIFE/article/details/106607905一个亲测有效的版本

node: v12.22.12

     

    "node-sass": "^4.14.1",

    "postcss": "^8.4.14",

    "postcss-loader": "^4.3.0",  // 主要是这个和webpack4要对应

    "sass-loader": "^8.0.2",

    "style-loader": "^1.2.1",

    "url-loader": "^4.1.0",

    "webpack": "^4.44.1",

    "webpack-cli": "^3.3.12",

    "webpack-dev-server": "^3.11.3"

总结 

在新建一个项目，使用插件的时候，要看官方文档这个插件对环境的要求，和对其他的依赖的版本的要求，有很多的错误就是引文版本不兼容引起的。