vue ---- webpack中loader

loader 概述

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

lodaer 加载器的作用：协助webpack打包处理特定的文件模块。
比如：

css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级JS语法

实例：将li 默认样式去掉

在src下创建css文件夹，在里面创建index.css

li {list-style: none;
}

引入方式：不在index.html中引入
webpack中所有的模块都可以通过ES6的导入语法导入
在 index.js中

//导入样式 （在 webpack 中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
import './css/index.css'

npm run dev 报错：提示没有对应的loader

安装配置处理css的loader

npm i style-loader@3.0.0 css-loader@5.2.6 -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的loader

npm i less-loader@10.0.1 less@4.1.1 -D

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

在css文件夹下创建index.less

html,
body,
ul {margin: 0;padding: 0;li {line-height: 30px;padding-left: 20px;font-size: 12px;}
}

在index.js中导入

import './css/index.less'

图片文件的loader

npm i url-loader@4.1.1 file-loader@6.2.0 -D

 //处理图片文件的loader//如果需要调用的loader只有一个，则只传递一个字符串也行，如果是多个loader，则必须指定数组{ test: /\.jpg|png|gif$/,use: ['style-loader','css-loader','less-loader?limit=2222',]}

limit用来指定图片的大小，byte,只有小于该值得才会被转为base64
实例
index.js

//导入图片，得到图片文件
import logo from './images/logo.jpg'
//给 img 标签的 src 动态赋值
$('.box').attr('src',logo)

index.html

    <!-- 需求： 把/src/images/logo.jpg 设置给 src 属性 --><img src="" alt="" class="box">

处理高级语法