webpack load css file and its configuration

webpack load css file and its configuration

1. When we wrote a few css file way we originally is through link tag to import into the css file, but if our css file has a lot of words if you want to refer to the html go, one by one import is not recommended ; and now we learn webpack, we hope that by packing bundle.js file, all files will all depend on import into it.
2. We want to know is, if not imported if css file, then packaged bundle.js file must not have css file entry function main.js file, all we need to rely main.js file css file.
3. Use Code:require('css文件地址')
4. After completion of dependence, we'll pack it npm run build will find the error. The error was: by You May need to handle the this AN Appropriate Loader File of the type. This means that you may need a proper loader to handle this file
5. So we open webpack Chinese language site, we found the need to install css-loader and style-loader loader both on the inside. And we also need to configure these files in webpack.config.js loader
6. So we use these two dependent download npm, as follows:npm install css-loader style-loader --save-dev
7. In webpack.config.js file, there is a module of the property, which is a target, there is a property in that object rules, is an array, each array are processed in different files needed loader . code show as below:

    const path = require('path');
    module.exports = {
        // 在配置文件中，手动指定 入口 文件和 出口 文件
        mode:'development',   //  webpack4.x版本中需要加入这个属性
        entry:'./src/main.js',  //  入口文件
        output:{  //  出口文件
            path:path.resolve(__dirname,'dist'),  //  指定将要打包好的文件应该要输出到哪个地方去（注意：路径必须是绝对地址）
            filename: 'bundle.js' //  指定输出文件的文件名
        },
        module:{
            rules:[
            {test:/\.css$/ , use:['style-loader' , 'css-loader']}
            ]
        }
    }

1. In which the test means that we are dealing with what type of file, use each item in the class loader is the process necessary documents.
   Note: the role of css-loader is used to allow the loader to load the css file main.js file, and the role of style-loader is to add style to the export module as the DOM. Here some people may be in doubt: in such a role is concerned, then it should first load the file and then added to the DOM as a style to fishes, order that the array should not be the case. Here I am very clear to tell you that your idea is not wrong, but he webpack This is very strange, it is the last element of the array, right to left to load the loader.
2. Set reliance, good loader download and configure the End, we will run after the discovery css file style came out.