本文假设你已经看过了前面的2个章节。
应用场景
webpack默认只支持js的打包,遇到图片、vue等不同格式的文件,需要不同的loader去打包。
loader打包图片
打包图片文件前先安装
//对图片文件打包
npm install --save-dev file-loader
//将图片文件转换base64的loader
npm install --save-dev url-loader
打包文件的代码
const path = require('path');
module.exports = {
mode: 'development',
entry: './src/index.js',
module: {
rules: [//文件打包规则
{
test: /\.(png|jpg|gif)$/,//打包的文件类型
use: [
{
loader: 'url-loader',//使用url-loader对文件打包
options: {
name:'[name].[ext]',//通过占位符,设置打包后文件的名字,
limit: 2048 //多少个字节内把图片转换为base64,1kb=1024byte
}
}
]
}
]
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
引用图片的js代码
import monkeyImg from './monkey.jpg'
var img = new Image()
img.src = monkeyImg
var dom = document.getElementById('root')
dom.append(img)
应用js的html代码,main.js是打包后的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="./main.js"></script>
</html>