Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how webpack4 deals with css". In daily operation, I believe many people have doubts about how webpack4 deals with css. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how webpack4 deals with css". Next, please follow the editor to study!

Webpack4 handles css

Webpack dealing with css is a very basic topic. It's just that in webpack4, when using autoprefixer to solve the compatibility of css browsers, there will be a different hole. So write down the knowledge in this area in detail.

First, what you need to rely on

Style-loader: inject the css file into the style tag of the html page. Reference: https://www.webpackjs.com/loa...

Css-loader: parse the import to the css file in js. Reference: https://www.webpackjs.com/loa...

Less-loader: parse the css preprocessing language. If you are using other preprocessing languages, use the corresponding loader. Reference: https://www.html.cn/doc/webpa...

Postcss-loader: post-process the css we wrote in the project:

Parse CSS into an abstract syntax tree structure (Abstract Syntax Tree,AST) that JavaScript can operate

Call the plug-in to process the AST and get the result.

A plug-in for autoprefixer:postcss-loader that prefixes css to suit different browsers.

Note: the function of postcss-loader is like in the later stage of film and television, put all the original files together, then add special effects with plug-ins, and finally output the finished product. The autoprefixer plug-in performs post-processing on the AST parsed by postcss-loader.

Second, installation dependency

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

Third, establish the less test file style.less

# world {display: flex;}

Fourth, import style.less in the main file index.js

Import'. / style.less'

Fifth, webpack configuration file webpack.config.js

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

ImportLoaders: 1 of css-loader is a very important setting. This will cause all parsed css to be injected into only one style tag. Without this configuration, each new css file will be injected with a new style tag, and there is a limit on the number of style tags in some browsers.

Sixth, establish the postcss configuration file postcss.config.js, in which the autoprefixer plug-in is introduced.

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

Seventh, add browser list browserslist to package.json. This is the pit in the preface. Without it, autoprefixer won't work.

{"scripts": {"build": "webpack", "dev": "webpack-dev-server-- mode development"}, "browserslist": ["defaults", "not ie"

1% "," iOS 7 "," last 3 iOS versions "]}

Eight, run the command

Npm run build

9. Css parsing is successful. The results are as follows:

# world {display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display: flex;} at this point, the study of "how webpack4 handles css" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.