Shulou(Shulou.com)05/31 Report--

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

Css loader

In webpack, all resources (js files, css files, template files, picture files, etc.) are regarded as a module, so many resources can be loaded.

To load these resources, we want to define these load configurations in the module property (specify the loader).

In the module property, the loader is defined by defining a loaders, whose property value is an array, with each member representing a configuration.

Define matching rules (regular expressions) through test

Define the loader through loader, and you can use it! Cascade multiple loaders

Loading css requires two loaders, one is style-loader, and the other is that css-loader style files are loaded into head by default.

Let's look at a small example.

| | _ static    | _ _ css      | _ _ app.css    | _ _ app.js | _ _ index.html | _ _ webpack.config.js |

App.css

H2 {background:red; width:100px; height:100px; color:blue;}

App.js

Require ('. / css/app.css') [xss_clean] ('hello connie')

Index.html

Title

Webpack.config.js

Module.exports = {entry:'./static/app.js', output: {filename:'dest/dest.js'}, module: {loaders: [{/ / configure regular expression, find the .css file with the suffix test:/\ .css $/, / / configure the loader, use! Symbolic concatenation of loaderVuvl styleMutual loadercssMurloader'}

Note: the test parameter is a regular expression and does not need to be quoted. If it is written as test: "/ .css $/", an error will be reported!

Picture loader

In webpack, image resources can also be seen as a module, so you can also use require to load them.

But to load these pictures, we need a picture loader, which is called url-loader.

Image loading is special, and there are two ways to load it.

Embedded: embed the picture inside the file (the picture will be converted to base64 format)

Outer chain, embedding the picture as a resource (introduced through the image path)

In webpack, we can define a limit parameter in url-loader to decide which way to introduce.

Grammar url-loader? Limit=2048

? Is used to define the parameter configuration of the loader

Limit indicates a picture size limit

2048 units are b, so 2048 means 2Kb

This means that when the picture is smaller than 2KB, we load the picture inline.

When the picture is larger than 2kb, we take the outer chain.

App.css

Div {height: 200px; width: 200px;} .test1 {background-image: url (". / images/test1.png");} .test2 {background-image: url (". / images/test2.jpg");} .test3 {background-image: url (". / images/test3.png");}

Webpack.config.js

Module.exports = {entry:'. / static/app.js', output: {filename: 'dest/dest.js'}, module: {loaders: [{/ / picture loader test:/\. (png | jpg | gif | jpeg) $/, loader:'url-loader?limit=2048'}, {test:/\ .css $/ LoaderRod styleMutual loaderThe CSSUST _ loader`]}}

Url-loader and file-loader are required for image loading.

Npm install url-loadernpm install file-loader

Check dest.js again

At this point, the study on "webpack css loading and picture loading instance analysis" is over. I hope to be able to 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.