VUE学习笔记：18.模块化开发之webpack打包图片文件
Posted new nm个对象
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE学习笔记：18.模块化开发之webpack打包图片文件相关的知识，希望对你有一定的参考价值。
1.webpack打包图片文件步骤
（1）前期准备
第一步：安装loader
- 安装file-loader
npm install file-loader@3.0.1 --save-dev
- 安装url-loader
npm install url-loader@1.1.2 --save-dev
第二步：在webpack的配置文件webpack.config.js中配置loader
let path = require('path') //导入path模块
module.exports = {
entry: './src/main.js',
output: {
// 动态获取路径。path.resolve（）函数是将两个路径拼接在一起
// __dirname是获取当前文件的绝对路径
path: path.resolve(__dirname,'dist'),
filename: 'build.js',
},
module:{
rules:[
{
test: /\\.css$/, //正则表达式匹配.css结尾的文件
//指定需要使用哪些loader
// 注意：使用的顺序是先使用css-loader加载文件，然后使用style-loader解析css文件
//因为webpack在读取多个loader时，是从右往左读，所以将css-loader放在后面
use:['style-loader','css-loader']
},
{
test: /\\.less$/,//正则表达式匹配.less结尾的文件
//webpack会先使用less-loader将less文件转换为css文件，然后使用css-loader加载文件，最后使用style-loader解析css文件
//loader的顺序不能随意改变
use:['style-loader','css-loader','less-loader']
},
{
test: /\\.(png|jpg|gif|jpeg)$/,
use:[
{
loader: 'url-loader',
options:{
// 指定文件的大小。
//当图片小于limit时，webpack会将图片编译为base64的字符串
//当图片大于limit时，webpack会将图片重新保存为name属性指定的图片
limit:102600,
//指定图片打包后的名字,[name]表示打包前图片的名字；[hash:8]表示8位随机hash值；[ext]表示打包前图片的后缀
name:'disk/img/[name].[hash:8].[ext]'
}
}
]
}
]
}
}
（2）使用webpack打包图片文件
第一步：更改项目的css目录的nomal.css文件，将背景变为图片
body {
background: url('../imgs/test001.jpg');
}
第二步：在webpack打包的入口文件（main.js）中引入nomal.css文件
import {add,mul} from "./mathuntils.js"
console.log(add(10,20))
console.log(mul(10,20))
// 引入css文件依赖
require('../css/nomal.css')
//引入less文件依赖
require('../css/aaa.less')
第三步：打包
第四步：运行index.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>你好啊</h3>
<script src="./dist/build.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
我们发现背景图片并没有加载，因为webpack打包后，默认index.html加载图片的url为img/test001.9ec2da36.jpg。也就是在webpack配置文件中定义的打包后图片的name属性值。
但实际上打包后图片的位置在哪呢？
要解决这个问题只有两个方法。
- 第一：将index.html文件也放入打包出口目录dist下（后面会讲解将html打包）
- 第二：将url改为
dist/img/test001.9ec2da36.jpg（本次讲解）- 在webpack的配置文件（webpack.config.json）中添加参数
publicPath
let path = require('path') //导入path模块 module.exports = { entry: './src/main.js', output: { // 动态获取路径。path.resolve（）函数是将两个路径拼接在一起 // __dirname是获取当前文件的绝对路径 path: path.resolve(__dirname,'dist'), filename: 'build.js', publicPath: './dist/' //publicPath：给页面所有url添加公共路径 }, module:{ rules:[ { test: /\\.css$/, //正则表达式匹配.css结尾的文件 //指定需要使用哪些loader // 注意：使用的顺序是先使用css-loader加载文件，然后使用style-loader解析css文件 //因为webpack在读取多个loader时，是从右往左读，所以将css-loader放在后面 use:['style-loader','css-loader'] }, { test: /\\.less$/,//正则表达式匹配.less结尾的文件 //webpack会先使用less-loader将less文件转换为css文件，然后使用css-loader加载文件，最后使用style-loader解析css文件 //loader的顺序不能随意改变 use:['style-loader','css-loader','less-loader'] }, { test: /\\.(png|jpg|gif|jpeg)$/, use:[ { loader: 'url-loader', options:{ // 指定文件的大小。 //当图片小于limit时，webpack会将图片编译为base64的字符串 //当图片大于limit时，webpack会将图片重新保存为name属性指定的图片 limit:102600, //指定图片打包后的名字,[name]表示打包前图片的名字；[hash:8]表示8位随机hash值；[ext]表示打包前图片的后缀 name:'img/[name].[hash:8].[ext]' } } ] } ] } } - 在webpack的配置文件（webpack.config.json）中添加参数
然后再次打包运行index.html如下：
背景图片加载成功。图片的url也正确了。
以上是关于VUE学习笔记：18.模块化开发之webpack打包图片文件的主要内容，如果未能解决你的问题，请参考以下文章
VUE学习笔记：20.模块化开发之webpack结合VUE使用
VUE学习笔记：22.模块化开发之webpack搭建本地服务器
VUE学习笔记：15.模块化开发之webpack使用配置文件打包
VUE学习笔记：16.模块化开发之webpack打包css文件