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!