webpack的loader

1.  css-loader和style-loader的引用

        1. 在main.js中依赖css文件-->require(./css/normal.css)

        2. 终端中配置css-loader-->npm install css-loader@2 --save-dev

        3. 终端中配置style-loader-->npm install style-loader@1 --save-dev

        4. 在webpack.config.js中配置

  module:{
        rules: [
            {
            // 正则表达式--复习
              test: /\.css$/,
            // css-loader只负责将css文件进行加载
            // style-loader负责将样式添加到DOM中
              use: ["style-loader", "css-loader"],
            },
        ]
    }

注意：style-loader需要在css-loader之前，因为在编译时，是从右向左，从下向上的顺序

2. less-loader的引用

        1. 在main.js中依赖less文件-->require('./css/special.less');

        2. 终端中配置npm i style-loader css-loader less-loader@4 less@4 -D

        3. webpack.config.js中完成配置

module:{
        rules: [
            {
                test:/\.less$/,
                use:[
                    {loader:'style-loader'},
                    {loader:'css-loader'},
                    {loader:'less-loader'}
                ]
            }
        ],
    }

3. url-loader和file-loader的引用

        1. 终端中配置url-loader-->npm install url-loader@1 --save-dev

        2. 终端中配置file-loader--> npm install file-loader@3 --save-dev  

        3. webpack.config.js中完成配置

module:{
        rules: [
           {
                // npm install url-loader@1.1.2 --save-dev  
                test:/\.(png|jpg|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            // 当加载的图片，小于limit(8196--8kb)时，会将图片编译成base64字符串形式
                            // 当加载的图片，大于limit时，需要使用file-loader模块进行加载
                                //     其实是将图片进行了打包，放在了dist文件夹中此时需要在webpack.config.js中的output中
                                // 添加publicPath:'dist/'，之后只要涉及url路径，就可以直接获取到正确的路径
                            limit:8196,
                            // 取原文件的名字+hash值为8的字符作为打包后的名字
                            name:'img/[name].[hash:8].[ext]'

                        }
                    }
                ]
            }
        ],
    }