Webpack loads css files and its configuration method

Webpack loads css files and its configuration method

webpack loads css files and its configuration

  • After we have written several CSS files, if we want to reference them in HTML, our initial method is to import the CSS files through the link tag. However, if we have a lot of CSS files, importing them one by one is not recommended. Now that we have learned webpack, we hope to import all dependent files by packaging the bundle.js file.
  • What we need to know is that if the css file is not imported in the entry function main.js file, then the packaged bundle.js file will definitely not have a css file, so we need to make the main.js file depend on the css file.
  • Use code: require('css file address')
  • After the dependencies are completed, we package it again and run npm run build and we will find an error. The error is: You may need an appropriate loader to handle this file type. This means you may need a suitable loader to process this file.
  • So we opened the Chinese website of webpack and found the two loaders we need to install: css-loader and style-loader. And we also need to configure these loaders in the webpack.config.js file
  • So we use npm to download these two dependencies. The code is as follows: npm install css-loader style-loader --save-dev
  • In the webpack.config.js file, there is a module property, which is an object. In this object, there is a rules property, which is an array. Each item in the array is an object required to process different file loaders. The code is as follows:
const path = require('path');
    module.exports = {
        // In the configuration file, manually specify the entry file and export file mode:'development', // This attribute needs to be added in the webpack4.x version entry:'./src/main.js', // Entry file output:{ // Export file path:path.resolve(__dirname,'dist'), // Specify where the packaged files should be output (note: the path must be an absolute address)
            filename: 'bundle.js' //Specify the file name of the output file},
        module:{
            rules:[
            {test:/\.css$/ , use:['style-loader' , 'css-loader']}
            ]
        }
    }

Test indicates what type of file we want to process, and each item in use is the loader required to process that type of file.

Note: The css-loader is used to let the main.js file load the css file, while the style-loader is used to add the module's exports as styles to the DOM. Some people may have questions here: according to this function, the file should be loaded first and then added to the DOM as a style, so the order in the array should not be like this. I am here to tell you clearly that your idea is not wrong, but webpack is very peculiar in that it loads the loader from the last element of the array, from right to left.

After setting the dependency, downloading the loader and configuring it, we will find that the styles in the CSS file appear after running it.

Summarize

The above is the webpack loading css file and its configuration method introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  How to use Element in React project

>>:  Pagination Examples and Good Practices

Recommend

Detailed explanation of the use of MySQL DML statements

Preface: In the previous article, we mainly intro...

Ten Experiences in Presenting Chinese Web Content

<br /> Focusing on the three aspects of text...

Build Maven projects faster in Docker

Table of contents I. Overview 2. Conventional mul...

Implementing a simple web clock with JavaScript

Use JavaScript to implement a web page clock. The...

CSS3 animation – steps function explained

When I was looking at some CSS3 animation source ...

MySQL 5.7.17 winx64 installation and configuration method graphic tutorial

Windows installation mysql-5.7.17-winx64.zip meth...

About the problem of no virtual network card after VMware installation

1 Problem description: 1.1 When VMware is install...

Example code for converting Mysql query result set into JSON data

Mysql converts query result set into JSON data Pr...

Detailed explanation of nginx reverse proxy webSocket configuration

Recently, I used the webSocket protocol when work...

Vue+axios sample code for uploading pictures and recognizing faces

Table of contents Axios Request Qs processing dat...

Detailed explanation of persistent storage of redis under docker

In this chapter, we will start to operate redis i...

HTML+CSS project development experience summary (recommended)

I haven’t updated my blog for several days. I jus...

Nginx http health check configuration process analysis

Passive Check With passive health checks, NGINX a...