Vue前端工程化--webpack中的加载器

webpack中的加载器

通过loader打包非js模块:默认情况下,webpack只能打包js文件,如果想要打包非js文件,需要调用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的顺序是从后向前进行调用

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

  1. 安装包
npm install style-loader css-loader -D
  1. 配置规则:更改webpack.config.js的module中的rules数组
module.exports = {
    ......
    plugins:[ htmlPlugin ],
    module : {
        rules:[
            {
                //test设置需要匹配的文件类型,支持正则
                test:/\.css$/,
                //use表示该文件类型需要调用的loader
                use:['style-loader','css-loader']
            }
        ]
    }
}

二、安装less,less-loader处理less文件

  1. 安装包
npm install less-loader less -D
  1. 配置规则:更改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']
            }
        ]
    }
}

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

  1. 安装包
npm install sass-loader node-sass -D
  1. 配置规则:更改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

四、安装post-css自动添加css的兼容性前缀(-ie-,-webkit-)

  1. 安装包
npm install postcss-loader autoprefixer -D
  1. 在项目根目录创建并配置postcss.config.js文件
   const autoprefixer = require("autoprefixer");
    module.exports = {
        plugins:[ autoprefixer ]
    }
    3).配置规则:更改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']
                }
            ]
        }
    }
    

五、打包样式表中的图片以及字体文件

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

  1. 安装包
npm install url-loader file-loader -D
  1. 配置规则:更改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"
            }
        ]
    }
}

六、打包js文件中的高级语法:在编写js的时候,有时候我们会使用高版本的js语法

有可能这些高版本的语法不被兼容,我们需要将之打包为兼容性的js代码
我们需要安装babel系列的包

A.安装babel转换器

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

B.安装babel语法插件包

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

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

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

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"
            },{
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项,意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            }
        ]
    }
}
发布了261 篇原创文章 · 获赞 249 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/qq_44721831/article/details/103563610

相关文章