Vue 教程(三十)webpack 图片文件处理
Posted _否极泰来_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 教程(三十)webpack 图片文件处理相关的知识，希望对你有一定的参考价值。
Vue 教程(三十)webpack 图片文件处理
-
准备两张图片素材，在 webpack 项目新建 image 文件夹，将素材放置文件夹中
-
下载安装 loader 命令：
- url-loader：
npm install url-loader@1.1.2 --save-dev- file-loader：
npm install file-loader@3.0.1 --save-dev -
修改 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack基础使用</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
<span>欢迎使用【鸿雁】网上购物系统</span>
<div id="book">
<div id="small">小图</div>
<div id="large">大图</div>
</div>
</body>
</html>
- 添加相关样式
#book {
background-color: white;
}
#small {
background-image: url("../image/compilers_small.jpg");
height: 200px;
}
#large {
background-image: url("../image/compilers_large.jpg");
height: 800px;
}
- 添加 webpack 配置
// 导入Node中path常量
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, 'dist'),
filename: "bundle.js",
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\\.(css|less)$/,
/**
* css-loader:只负责将css文件进行加载
* style-loader:负责将样式添加到DOM中
* 使用多个loader时,是从右向左
*/
use: ['style-loader', 'css-loader', 'less-loader']
}, {
test: /\\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
/**
* 当加载的图片，小于limit时，会将图片编译成base64字符串的形式
* 当加载的图片，大于limit时，需要file-loader模块进行加载
* 默认：limit: 8192
*/
limit: 45000,
// 将大于limit配置的文件，放在dist/image文件夹下，生成如：compilers_large.1e243c66.jpg文件名称
name: 'image/[name].[hash:8].[ext]'
}
}
]
}
]
}
}
- 最终效果
– 以上为《Vue 教程(三十)webpack 图片文件处理》，如有不当之处请指出，我后续逐步完善更正，大家共同提高。谢谢大家对我的关注。
——厚积薄发(yuanxw)
以上是关于Vue 教程(三十)webpack 图片文件处理的主要内容，如果未能解决你的问题，请参考以下文章
Vue 教程(三十二)webpack 使用 vue 配置步骤
Vue 教程(三十六)webpack 之代码混淆插件 Uglifyjs