4webpack中的loader
4.1loader概述
在实际开发过程中，webpack默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!
loader加载器的作用：
协助webpack打包处理特定的文件模块。
比如：
css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less相关的文件
babel-loader 可以打包处理webpack无法处理的高级JS语法
4.2loader的调用过程
4.3打包处理css文件
4.3.1安装处理css文件的loader
npm i style-loader css-loader -D
4.3.2配置
在 webpack.config.js 的 module -> rules 数组中，添加loader规则如下:
rules:[{ test:/\.css$/, use:['style-loader', 'css-loader'] }]
其中，test表示匹配的文件类型，use表示对应要调用的 loader
注意:
use数组中指定的loader顺序是固定的
多个loader的调用顺序是：从后往前调用
配置后的 webpack.config.js
//导入html-webpack-plugin插件 得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // new构造函数创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // 代表webpack运行的模式，可选值有两个development和production mode: 'development', // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:8080, // 指定主机运行的地址 host:'127.0.0.1' }, module: { rules:[{ test:/\.css$/, use:['style-loader', 'css-loader'] }] } }
4.3.3配置完成后就可以导入css样式
在index.js文件中：
// 导入样式，在webpack中，一切皆模块，都可以通过es6导入语法进行导入和使用 import './css/index.css'
4.3.4过程解释
4.4打包处理less文件
4.4.1安装处理less文件的loader
npm i less-loader less -D
4.4.2配置
在webpack.confing.js文件中的module->rules数组中添加：
module: { rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']}, {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']} ] }
4.5打包处理样式表中与url路径相关的文件
4.5.1安装
npm i url-loader file-loader -D
4.5.2配置
在webpack.config.js 的 module -> rules数组中，添加loader规则如下︰
module: { //所有第三方文件模块的匹配规则 rules: [ //文件后缀名的匹配规则 { test: /\.jpg|png|gif$/,use: 'url-loader?limit=22229'}, ] }
其中 ? 之后的是loader的参数项：
limit用来指定图片的大小，单位是字节( byte)
只有≤limit 大小的图片，才会被转为base64格式的图片
补充：小图片适合转成base64，大图片不合适，转成base64图片体积会变大
4.5.3使用js给img标签导入图片
<!-- 需求：把 /src/images/01.jpg 设置给src属性 --> <img src="" alt="" class="box">
// 导入图片，得到图片文件 import i from './images/01.jpg' // 给img标签的src动态赋值 $('.box').attr( 'src', i )
4.5.4loader的另一种配置方式(带参数的loader)
module: { //所有第三方文件模块的匹配规则 rules: [ //文件后缀名的匹配规则 { test: /\.jpg|png|gif$/, use: { //通过loader属性指定调用的loader loader: 'url-loader', //通过option属性指定参数 options: { limit: 22229 } } } ] }
4.6打包处理js文件中的高级语法
webpack.只能打包处理一部分高级的JavaScript语法。对于那些webpack 无法处理的高级js语法，需要借助于babel-loader进行打包处理。
例如：
class Person { //webpack无法处理静态属性这个高级语法 static info = 'person info' } console.log( Person.info )
4.6.1安装
npm i babel-loader @babel/core @babel/plugin-proposal-class-properties -D
4.6.2配置
// 使用babel-loader处理高级的js语法 { test:/\.js$/, // 注意：必须使用exclude排除指定项；因为node_modules目录下的第三方包不需要被打包 exclude: /node_modules/, use: { loader: 'babel-loader', options: { // 声明babel可用插件 // 此插件用来转化class中的高级语法 plugins: ['@babel/plugin-proposal-class-properties'] } } }
