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

How to use Xtrabackup to back up and restore MySQL

Table of contents 1. Backup 1.1 Fully prepared 1....

js to create a carousel effect

I think the carousel is a relatively important po...

8 commands to effectively manage processes in Linux

Preface The role of process management: Determine...

HTML pop-up div is very useful to realize mobile centering

Copy code The code is as follows: <!DOCTYPE ht...

A detailed introduction to JavaScript execution mechanism

Table of contents 1. The concept of process and t...

How to Dockerize a Python Django Application

Docker is an open source project that provides an...

Class in front-end JavaScript

Table of contents 1. Class 1.1 constructor() 1.2 ...

Teach you a trick to achieve text comparison in Linux

Preface In the process of writing code, we will i...

7 Best VSCode Extensions for Vue Developers

Adding the right VS Code extension to Visual Stud...

Detailed explanation of routes configuration of Vue-Router

Table of contents introduce Object attributes in ...

How to distinguish MySQL's innodb_flush_log_at_trx_commit and sync_binlog

The two parameters innodb_flush_log_at_trx_commit...