webpack loads css files and its configuration
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
It mainly shows how to configure X-Frame-Options,...
Preface: In the previous article, we mainly intro...
<br /> Focusing on the three aspects of text...
Table of contents I. Overview 2. Conventional mul...
Use JavaScript to implement a web page clock. The...
When I was looking at some CSS3 animation source ...
Windows installation mysql-5.7.17-winx64.zip meth...
1 Problem description: 1.1 When VMware is install...
Implementing carousel with a single DOM node You ...
Mysql converts query result set into JSON data Pr...
Recently, I used the webSocket protocol when work...
Table of contents Axios Request Qs processing dat...
In this chapter, we will start to operate redis i...
I haven’t updated my blog for several days. I jus...
Passive Check With passive health checks, NGINX a...