Loading CSS file by webpack and its configuration method

Time:2020-10-10

Loading CSS file by webpack and its configuration

  • After we have written several CSS files, if we want to reference them into HTML, the first way we can do this is to import the CSS files through the link tag. However, if there are many CSS files, it is not recommended to import them one by one. Now that we have learned webpack, we hope to use packaging bundle.js File, import all dependent files into Go.
  • What we need to know is, if we have an entry function main.js If the CSS file is not imported, the bundle.js There must be no CSS file in the file, so we need to make the main.js Files depend on CSS files.
  • Use code: require (‘css file address’)
  • After the dependency is finished, we will package the NPM run build and find that the error is reported. The error is: you may need an appropriate loader to handle this file type. This means that you may need a suitable loader to handle the file
  • So we opened the Chinese Web site of webpack and found that we need to install CSS loader and style loader. And we need to be in webpack.config.js Configure these loaders in the file
  • So we use NPM to download the two dependencies. The code is as follows: NPM install CSS loader style loader — save dev
  • stay webpack.config.js In the file, there is an attribute of module, which is an object. In this object, there is a rule attribute, which is an array. Each item in the array is the object needed to process different file loaders. The code is as follows:
const path = require('path');
    module.exports = {
        //In the configuration file, manually specify the entry and exit files
        Mode: 'development', // this attribute needs to be added in webpack4. X
        entry:'./src/ main.js "// entry file
        Output: {// export file
            path:path.resolve (E) Dirname, 'dist'), // specifies where the file to be packaged should be output (Note: the path must be an absolute address)
            filename: ' bundle.js '// specifies the file name of the output file
        },
        module:{
            rules:[
            {test:/\.css$/ , use:['style-loader' , 'css-loader']}
            ]
        }
    }

Where test indicates which type of file we want to process, and each item in use is the loader needed to process this type of file.

This is used to make the loader work main.js File loads the CSS file, and the role of style loader is to add the module’s export as a style to the dom. Some people may have doubts here: in this way, the file should be loaded first and then added to the DOM as a style. The order in the array should not be like this. I will tell you clearly that your idea is not wrong, but webpack is very strange. It loads loaders from the last element of the array from right to left.

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

summary

The above is the webpack loading CSS file and its configuration method introduced by Xiaobian. I hope it will be helpful for you. If you have any questions, please leave me a message, and the editor will reply you in time. Thank you very much for your support to the developeppaer website! If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!