31_webpack中的加载器

webpack中的加载器

通过loader打包非js模块：

默认情况下，webpack只能打包js文件，如果想要打包非js文件，需要调用loader加载器，才能打包loader加载器包含：

常用的loader加载器包含：

1).less-loader
2).sass-loader
3).url-loader:打包处理css中与url路径有关的文件
4).babel-loader:处理高级js语法的加载器
5).postcss-loader
6).css-loader,style-loader

注意：指定多个loader时的顺序是固定的，而调用loader的顺序是从后向前进行调用

1、安装style-loader,css-loader来处理样式文件：

安装包：

npm install style-loader css-loader -D

配置规则：更改webpack.config.js的module中的rules数组：

    module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                }
            ]
        }
    }

2、安装less,less-loader处理less文件：

安装包：

npm install less-loader less -D

配置规则：更改webpack.config.js的module中的rules数组：

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                }
            ]
        }
    }

3、安装sass-loader,node-sass处理less文件

安装包：

npm install sass-loader node-sass -D

配置规则：更改webpack.config.js的module中的rules数组：

module.exports = {
        ......
        plugins:[ htmlPlugin ],
        module : {
            rules:[
                {
                    //test设置需要匹配的文件类型，支持正则
                    test:/\.css$/,
                    //use表示该文件类型需要调用的loader
                    use:['style-loader','css-loader']
                },
                {
                    test:/\.less$/,
                    use:['style-loader','css-loader','less-loader']
                },
                {
                    test:/\.scss$/,
                    use:['style-loader','css-loader','sass-loader']
                }
            ]
        }
    }

补充：安装sass-loader失败时，大部分情况是因为网络原因，详情参考：https://segmentfault.com/a/1190000010984731?utm_source=tag-newest

4、安装post-css自动添加css的兼容性前缀（-ie-,-webkit-）

安装包：

npm install postcss-loader autoprefixer -D

在项目根目录创建并配置postcss.config.js文件：

const autoprefixer = require("autoprefixer");
module.exports = {
    plugins:[ autoprefixer ]
}

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader','postcss-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            }
        ]
    }
}

5、打包样式表中的图片以及字体文件，在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理，使用url-loader和file-loader来处理打包图片文件以及字体文件

安装包：

npm install url-loader file-loader -D

配置规则：更改webpack.config.js的module中的rules数组

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            }
        ]
    }
}

6、打包js文件中的高级语法：

在编写js的时候，有时候我们会使用高版本的js语法，有可能这些高版本的语法不被兼容，我们需要将之打包为兼容性的js代码

我们需要安装babel系列的包，安装babel转换器：

npm install babel-loader @babel/core @babel/runtime -D

安装babel语法插件包：

npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

在项目根目录创建并配置babel.config.js文件：

module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }

配置规则：更改webpack.config.js的module中的rules数组：

module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型，支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },{
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}