webpack 之打包图片
程序员文章站
2022-07-14 20:24:44
...
我们可以使用webpack打包图片。打包的具体步骤如下:
1.打包图片时我们需要file-loader。安装flie-loader。
npm install --save-dev file-loader
2.配置webpack.fig.js
module:{
rules:[
{
test:/\.(png|svg|jpg|gif)$/,
use:["file-loader?limit=8192&name=dist/[hash].[ext]"]
}
]
}
};
注意:limiet的意思是:图片大小小于limit时,使用base64转码。大于limit时,正常打包。
name:通过name属性改变图片的打包目录和文件名。
hash:图片经过处理后,会在输出文件夹中生成图片,此时图片的名字为hash。ext代表图片的格式。
3.项目的结构如下
webpack_demo
--node_modules
--src
--index.js
--icon.jpg
--style.css
--webpack.config.js
--package.json
--index.js
4.index.js如下:
import './style.css';
import Icon from "./icon.jpg"
function component() {
var element = document.createElement('div');
element.innerHTML ="hello webpack";
element.classList.add('hello');
var myIcon = new Image();
myIcon.src = Icon;
console.log(myIcon);
element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
当你 import
import Icon from "./icon.jpg", 该图像将被处理并添加到 dist 目录,并且变量将包含该图像在处理后的最终 url
5.style.css文件:
.hello {
color: red;
background: url('./icon.jpg');
}
5。打包:
webpack --mode development
此时,会看到dist下的图片名称被更改。打开index.htm。会看到页面的显示。body中有img标签(注意看图片的src属性,与第2步配置的路径相同)。head中还有style标签。
6.图片的引用路径
若没有name属性,则图片的引用路径为publicPath+filename。也就是js、css中被打包后的图片的路径。
若有name属性,则图片的引用路径为publicPath+name。也就是js、css中被打包后的图片的路径。
!!!一定要设置publicPath。
上一篇: webpack打包图片
下一篇: 使用webpack打包图片