webpack加载器的使用方法

webpack中的加载器

通过loader打包非js模块

在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js
后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器可以协助 webpack 打包处理特定的文件模块，比如:

• less-loader 可以打包处理 .less 相关的文件
• sass-loader 可以打包处理 .scss 相关的文件
• url-loader 可以打包处理 css 中与 url 路径相关的文件

webpack中加载器的基本使用

1. 打包处理css文件

   运行 npm i style-loader css-loader -D 命令，安装处理 css 文件的loader
   在 webpack.config.js 的 module -> rules 数组中，添加 `

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

   其中，test 表示要匹配的文件类型， use 表示对于要调用的 loader
   注意：
   use 数组中指定的 loader 顺序是固定的
   多个loader 的调用顺序： 从后往前调

打包less 文件

运行 npm i less-loader less -D
在 webpack.config.js 的module -> rules 数组中，添加loader 规则如下：

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

打包处理scss 文件

运行 npm i sass-loader node-sass -D
在 webpack.config.js 的module -> rules 数组中，添加loader 规则如下：

 {test:/\.scss$/,use: ['style-loader','css-loader','sass-loader']}

4.配置postCSS自动添加css的兼容前缀

运行npm i postcss-loader autoprefixer -D命令
在项目根目录中创建postcss 的配置文件 postcss.config.js，并初始化如下配置:

const autoprefixer = require ( ' autoprefixer') 
//导入自动添加前缀的插件
module.exports = {
    plugins: [ autoprefixer ] //挂载插件
}

在webpack.config.js 的module -> rules数组中，修改css 的loader 规则如下:

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

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

①运行npm i url-loader file-loader -D命令
②在 . webpack. config.js的module -> rules 数组中，添加loader规则如下:

{
                test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                use: 'url-loader?limit=16940'
            }

其中?之后的是loader的参数项。
limit用来指定图片的大小，单位是字节(byte) ,只有小于limit大小的图片,才会被转为base64图片

打包处理js文件中的高级语法

①安装babe1转换器相关的包: npm i babel-loader @babel/core @babel/ runtime -D .
②安装babe 1语法插件相关的包: 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-proposalclass-properties']
}

④在 webpack.config.js的module -> rules 数组中,添加loader 规则如下:
// exclude为排除项，表示babel- loader不需要处理node_ modules中的js文件

{ test: /\.js$/, use: 'babel-loader', exclude: /node_ modules/ }