Webpack adding browser prefixes via Postcss-loader

In Webpack, we can easily use Autoprefixer to add different browser prefixes for the CSS3 property.

First, you need to install autoprefixer not much to say, followed by the installation of Postcss-loader (npm install--save-dev postcss-loader)

Next, add the following code in the Webpack.config.js file (red circle section):

　　　　　　

Next, create a new Postcss.config.js file in the Webpack.config.js's sibling directory, configured as follows:

Module.exports = {  plugins: [    require (' autoprefixer ') ({      browsers: [' last ' versions ', "> 2%", "Firefox >=", "ie 6-11"]}       )  ]}

Then, using NPM Run build packaging, you can see that the property that needs to add the browser prefix automatically adds the relevant browser prefix. Very convenient to have wood there.

Webpack adding browser prefixes via Postcss-loader