Let's talk about how webpack4 handles css

Webpack4 Processing CSS

Foreword: Webpack processing CSS is a very basic topic. It's just that in webpack4, when using autoprefixer to solve CSS browser compatibility, there will be a pitfall that is different from before. So I will write about this knowledge in detail.

1. Required dependencies

• style-loader: Inject css files into the style tag of the html page. Reference: https://www.webpackjs.com/loa...
• css-loader: parses css files imported into js. Reference: https://www.webpackjs.com/loa...
• less-loader: parses css preprocessing language. If you use other preprocessing languages, you must use the corresponding loader. Reference: https://www.html.cn/doc/webpa...

• postcss-loader: Post-process the css we have written in the project:

  • Parse CSS into an Abstract Syntax Tree (AST) structure that JavaScript can operate,
  • Call the plug-in to process the AST and get the result.
• autoprefixer: A plug-in for postcss-loader that prefixes css to adapt to different browsers.

Note: The function of postcss-loader is just like the post-production of film and television. It combines all the original files, then uses plug-ins to add special effects, and finally outputs the finished product. The autoprefixer plug-in performs post-processing on the AST parsed by postcss-loader.

2. Install dependencies

npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer

3. Create less test file style.less

#world{
  display: flex;
}

4. Import style.less

import './style.less';

in the main file index.js

Five, webpack configuration file webpack.config.js

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                'style-loader',
                {loader: 'css-loader', options: { importLoaders: 1 } },
                'less-loader',
                'postcss-loader'
            ]
        },
    ]
}

css-loader’s importLoaders: 1, is a very important setting. This will cause all parsed css to be injected into only one style tag. Without this configuration, a new style tag will be created when each new css file is injected. Some browsers have a limit on the number of style tags.

Sixth, create the postcss configuration file postcss.config.js, and introduce the autoprefixer plug-in

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

Seventh, add the browser list browserslist in package.json. This is the pitfall mentioned in the preface. Without it, autoprefixer will not work

{
 "scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server  --mode development"
 },
 "browserslist": [
  "defaults",
  "not ie < 11",
  "last 2 versions",
  "> 1%",
  "iOS 7",
  "last 3 iOS versions"
 ]
}

Eight, run the command

npm run build

Nine, the css parsing is successful, the effect is as follows:

#world {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

Recommended learning: "css video tutorial"

The above is the detailed content of Let's talk about how webpack4 handles css. For more information, please follow other related articles on the PHP Chinese website!