一、页面展示图片的几种方式
当我们需要在页面呈现图片的时候，有三种方式
- 通过设置背景图片
- img 标签引入图片
- 通过 js 插入 img 对象
二、index.html
<!-- 通过背景来引入图片 -->
<div class="background_img"></div>
<!-- 通过标签引入图片，需下载 html-withimg-loader -->
<img src="./images/webpack.png" class="webapck_img" />
三、index.css
/* 背景图片 */
.background_img{
background-image: url(./images/webpack.png);
width: 200px;
height: 200px;
margin: 10px 0;
}
/* img标签 */
.webapck_img{
display: inline-block;
width: 80px;
height: 80px;
}
四、main.js
// 通过创建一个 Image 对象来在 html 插入一个 图片
let src = require('./images/webpack.png');
let img = new Image();
img.src = src;
document.body.appendChild(img);
// 引入 css 样式
require('./index.css')
五、下载 loader
// 解析 img 标签
npm i html-withimg-loader -D
// file-loader 是解析图片地址，把图片从源位置拷贝到目标位置并且修改原引用地址
npm i file-loader url-loader -D
六、webpack.config.js 配置
const path = require('path');
const webpack = require('webpack');
// 打包前删除 dist 文件夹
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
// 打包后的文件要放在哪里，及打包后的文件要命名为什么名称
output: {
path: path.join(__dirname, 'dist'),
filename: '[name][hash:8].js'
},
// loader工具,所有要用到的 loader 工具都需要经过安装
module: {
rules: [
...
{
// 解析 图片地址
test: /\.(png|jpg|gif|svg|bmp)/,
// file-loader 是解析图片地址，把图片从源位置拷贝到目标位置并且修改原引用地址
loader: {
loader: 'url-loader',
options: {
// 指定拷贝文件的输出目录
outputPath: 'Images/',
limit: 9 * 1024,
}
}
},
{
// 解析 img中src 引入地址
test: /\.(html|htm)/,
loader: 'html-withimg-loader'
}
]
},
],
}
