Vue2.0开发之——webpack基础-file-loader插件(08)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • 导入图片显示示例及问题
  • file-loader/url-loader的安装与配置
  • file-loader中的limit选项

二 示例-导入图片显示示例及问题

1-src/images文件夹下添加logo.png文件

2-index.html下添加img属性

1
<img src="" alt="" class="box"/>

3-通过index.js添加img图片显示

1
2
3
4
5
//1.导入图片，得到图片文件
import logo from './images/logo.png'

//2.给img标签的src动态赋值
$('.box').attr('src',logo)

4-执行npm run dev，查看预览效果

说明：缺少处理图片文件的file-loader、url-loader，，后面介绍如何解决此问题

三 file-loader/url-loader的安装与配置

3.1 loader的安装

1
npm install url-loader file-loader -D(--save-dev)

url-loader、filder-loader安装完成后，package.json-devDependencies中配置

1
2
3
4
"devDependencies": {
    "file-loader": "^6.2.0",
    "url-loader": "^4.1.1",
},

3.2 loader的配置

在webpack.config.js的module->rules数组中，添加loader规则

1
2
3
4
5
6
7
8
9
10
11
12
13
module: { //所有第三方文件模块的匹配规则
    rules: [ //文件后缀名的匹配规则
        {
            test: /\.css$/, use: ['style-loader', 'css-loader']
        },
        {
            test: /\.less$/, use: ["style-loader", "css-loader", "less-loader",],
        },
        {
            test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192,}}],
        },
    ]
}

3.3 配置loader后的效果

四 file-loader中的limit选项

4.1 说明

  • limit用来指定图片的大小，单位是字节(byte)
  • 只有小于等于limit大小的图片，才会被转换为base64格式的图片

4.2 limit和图片大小关系

图片(2.09KB)>limit(1024 B) 图片(2.09KB)<limit(8192 B)

五 参考

  • webpack-urloader
  • webpack-fileloader