我们可以使用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属性改变图片的加载路径。(图片会在index。html中引入img元素。此路径为图片的引入路径
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 MyImage from './my-image.png'
,该图像将被处理并添加到
dist
目录,
并且
MyImage
变量将包含该图像在处理后的最终 url。
5.style.css文件:
.hello { color: red; background: url('./icon.jpg'); }
5。打包:
webpack --mode development此时,会看到dist下的图片名称被更改。打开index.htm。会看到页面的显示。body中有img标签(注意看图片的src属性,与第2步配置的路径相同)。head中还有style标签。