Prefixing css3 with postcss loader

1. Install two packages, postcss loader and autoprefixer, in the terminal

   npm install –save-dev postcss-loader autoprefixer

If the installation fails, delete the node ﹣ modules folder. npm install reinstalls the folder and then reinstalls the above two packages
2. Create a postcss-config.js file of the same level as webpack-config.js

3. Configure postcss.config.js and introduce the qutoprefixer plug-in

```
    module.exports = {
        plugins: [
            require('autoprefixer')
        ]
    }
    //Exposed interface
    <br>
```

4. Configure the loader in webpack-config.js

 module:{
    rules: [
        {
          test: /\.css$/,
          //use: [ 'style-loader', 'css-loader' ]   //use can also be written as a loader
          use:extractTextPlugin.extract({
            fallback:'style-loader',
            use:[{
              loader:'css-loader',
              options:{
                importLoaders:1
              }
            },
              'postcss-loader'
            ]
          })
        },{
          test:/\.(png|jpg|gif)/,
          use:[{
            loader:'url-loader',
            options:{
              limit:5000,
              outputPath:'images/'
            }
          }]
        },{
          test:/\.(htm|html)$/i,
          use:['html-withimg-loader']
        },{
          test:/\.less$/,
          use:extractTextPlugin.extract({
            use:[{
              loader:'css-loader'
            },{
              loader:'less-loader'
            }],
            fallback:'style-loader'
          })
        },{
          test:/\.scss$/,
          use:extractTextPlugin.extract({
            use:[{
              loader:'css-loader'
            },{
              loader:'sass-loader'
            }],
            fallback:'style-loader'
          })
        }
      ]
  },

Note: configure the first css in the module, and configure the postcss loader (others are previously configured), namely:

5. Extract the loader configuration of css:

use:extractTextPlugin.extract({
    fallback:'style-loader',
    use:[{
      loader:'css-loader',
      options:{
        importLoaders:1
      }
    },
      'postcss-loader'
    ]
 })

6. Delete the dist folder, repack the webpack, and the CSS attribute in dist/css/index.css will automatically add the CSS3 prefix

Configuration item (github)