webpack handles css browser compatibility issues

This article brings you relevant knowledge about javascript, which mainly introduces issues related to the compatibility of webpack's processing of css browsers, including postcss-loader and postcss-preset-env Let’s take a look at the relevant content about the use of plug-ins. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end]

1. CSS compatibility processing

1. First, you need to add the following code to package.json, which will be used later [the configuration here can be based on project requirements]

  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

2. Install plug-ins: postcss-loader and postcss-preset-env

postcss-preset-env helps postcss-loader find the browser compatibility configuration in browserslist in package.json

The production environment configuration will be used by default. If you want to use the development environment configuration, you need to add code to webpack.config.js:

process.env.NODE_ENV = "development"

3. The configuration in webpack is as follows: (Note that according to the latest configuration attributes of the official document, the writing method of webpack4 is different from the writing method of webpack5!!!)

         {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [['postcss-preset-env', {}]]
              }
            }
          }

Test:

We can add the following two attributes to the css file:

  display: flex;
  backface-visibility: hidden;

Run the webpack command to package and view the packaged css file:

css compatibility processing end

2. CSS compression

1. Install the plug-in: css-minimizer-webpack-plugin

2. How to use : In webpack.config.js:

Introduction:

const cssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')

Configuration:

  plugins: [
    new cssMinimizerWebpackPlugin()
  ],

[Related recommendations: javascript video tutorial, web front end】

The above is the detailed content of webpack handles css browser compatibility issues. For more information, please follow other related articles on the PHP Chinese website!