webpack加载器

开发过程中，webpack只能打包.js后缀结尾的模块，若需要处理非.js后缀的模块需要调用loader加载器才可以正常打包。

例如：

打包处理css文件

运行命令

npm i style-loader css-loader -D //安装处理css文件的loader

在webpack.config.js的module->rules

//所有第三方文件模块的匹配规则
module：{
    rules:[
        { test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

ps:use数组中指定的loader顺序是固定的

多个loader的调用顺序是：从后往前调用

打包处理less文件

运行命令

npm i less-loader less -D 

在webpack.config.js的module->rules

//所有第三方文件模块的匹配规则
module：{
    rules:[
        { test:/\.less$/,use:['style-loader','css-loader','less-loader']}
    ]
}

打包处理scss文件

运行命令

npm i sass-loader node-sass -D 

在webpack.config.js的module->rules

//所有第三方文件模块的匹配规则
module：{
    rules:[
        { test:/\.css$/,use:['style-loader','css-loader','sass-loader']}
    ]
}

打包样式表的图片和字体文件

运行命令

npm i url-loader file-loader -D

在webpack.config.js的module->rules

//所有第三方文件模块的匹配规则
module：{
    rules:[
        { test:/\.jpg|png|$/,
          use:'url-loader?limit=16940'}
    ]
}

ps:?之后是loader的参数项

limit等于图片的大小

npm run dev

打包处理js文件

运行命令

npm i babel-loader @babel/core @babel/runtime -D //安装babel转换器相关的包

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D //安装babel转换器相关的包

在项目根目录配置文件babel.config.js并进行初始化设置

//所有第三方文件模块的匹配规则
module.exports：{
   presets:['@babel/preset-env'],
   plugins:['@babel/plugin-transform-runtime',' @babel/plugin-proposal-class-properties']
}

在webpack.config.js的module->rules

//exclude为排除项，
{ test:/\.js$/,use:['babel-loader',exclude:/node_modules/]}