VUE学习笔记：18.模块化开发之webpack打包图片文件

最新推荐文章于 2022-12-16 08:59:37 发布

new nm个对象

最新推荐文章于 2022-12-16 08:59:37 发布

阅读量505

点赞数 4

分类专栏： vue学习笔记文章标签： vue 前端

本文链接：https://blog.csdn.net/ouyicnm/article/details/117967465

版权

vue学习笔记专栏收录该内容

29 篇文章 11 订阅

订阅专栏

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]'
						}
					}
				]
			}
		]
	}
}

然后再次打包运行index.html如下：
在这里插入图片描述

背景图片加载成功。图片的url也正确了。

new nm个对象

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
4
评论
VUE学习笔记：18.模块化开发之webpack打包图片文件

1.webpack打包图片文件步骤（1）前期准备第一步：安装loader安装file-loadernpm install file-loader@3.0.1 --save-dev安装url-loadernpm install url-loader@1.1.2 --save-dev第二步：在webpack的配置文件webpack.config.js中配置loaderlet path = require('path') //导入path模块module.exports = {
复制链接

扫一扫