Webpack4 css Add browser prefix postcss-loader

Automatically add browser prefixes, we use postcss-loader here

First CNPM install--save-dev postcss-loader autoprefixer

I use the cnpm here, NPM can also download

Next is the configuration

Looked up the relevant documents on the Internet The discovery needs to create a new Postcss.config.js file to configure the Postcss-loader.

First configuration: Create a new Postcss.config.js file with Webpack.config.js peers

{    plugins:[        require ("Autoprefixer")    ]}

Then the packaged CSS file is automatically prefixed.

{  display: flex;   -webkit-transform: all 1s; /* -webkit-is added here. */   transform: all 1s;}

However, I have found that moving the configuration to the options now can produce the same effect.

The second configuration is added in the Webpack.config.js module.rules postcss-loader options.

{Test: /\.                (le|c) ss$/, include: [Path.resolve (__dirname, "app")], exclude: [ Path.resolve (__dirname, "Node_modules")], use: [{LOADER:MINICSSEXTRACTPL Ugin.loader},                /** * Style-loader mainly inserts CSS into the Head's Style tab inline*/                // {Loader:"Style-loader"},                /**                 *                  */{Loader:"Css-loader"},                {Loader:"Less-loader"},                {Loader:"Postcss-loader", Options: {plugins: [Require ( "Autoprefixer")//* Add here */]}                }            ]        }

You can also add browser prefixes automatically.

Compared to the two methods, it is certainly the second better, you can save the trouble of creating a file, directly in the same file configuration is good.

But this loader I found that only-webkit-prefixes can be added, and several other prefixes are not yet found.

Webpack4 css Add browser prefix postcss-loader