在 07-加载图片 之后，便可以正常加载和显示图片了；但是这些图片都是未经压缩的原尺寸，webpack 通过 image-webpack-loader 压缩图片。
一、添加图片
在 src 目录下添加 icon.jpg 图片,编辑index.js
import "./style.css"
import Icon from './icon.jpg';
//生成一个内容为Hello webpack !的div标签
function component() {
let element = document.createElement('div');
element.innerHTML = "Hello webpack !";
//添加class
element.classList.add("hello");
return element;
}
//将生成的div标签添加到body中去
document.body.appendChild(component());
function addImage() {
let element = document.createElement('img');
//设置图片路径
element.src = Icon;
//添加class
element.classList.add("image");
return element;
}
//将生成的img标签添加到body中去
document.body.appendChild(addImage());
编辑 style.css
.hello{
color: red;
}
.image{
width: 200px;
height: 200px;
}
编辑 webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: './src/index.js',
mode:"production",
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules:[
{
test:/\.css$/,
use:[
"style-loader",
]
},
{
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
"css-loader"
]
},
//添加loader
{
test:/\.(png|svg|jpg|gif)$/,
use:[
"file-loader"
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
title: "15- webpack 压缩 JavaScript 代码",
minify: {
collapseWhitespace: true,//删除空格、换行
},
}),
//添加插件
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
//添加插件
new OptimizeCSSAssetsPlugin({})
],
};
编译成功
$ webpack
Hash: 9c47c45174524a79d630
Version: webpack 4.35.3
Time: 723ms
Built at: 07/24/2019 10:14:38 AM
Asset Size Chunks Chunk Names
76e7e08e0b3a04a612c89ad13c999813.jpg 51 KiB [emitted]
index.html 219 bytes [emitted]
main.bundle.js 6.25 KiB 0 [emitted] main
main.css 49 bytes 0 [emitted] main
Entrypoint main = main.css main.bundle.js
此时图片大小为 51 KiB（macOS Mojave 10.14.6 ）
二、安装
npm install image-webpack-loader --save-dev
//
yarn add image-webpack-loader --dev
安装成功
yarn add v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 133 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @mrmlnc/[email protected]
├─ @nodelib/[email protected]
├─ @sindresorhus/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨ Done in 173.11s.
三、编辑 webpack.config.js
添加到 file-loader 之后
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: './src/index.js',
mode:"production",
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules:[
{
test:/\.css$/,
use:[
"style-loader",
]
},
{
test:/\.css$/,
use:[
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
"css-loader"
]
},
//添加loader
{
test:/\.(png|svg|jpg|gif)$/,
use:[
"file-loader",
'image-webpack-loader',
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
title: "15- webpack 压缩 JavaScript 代码",
minify: {
collapseWhitespace: true,//删除空格、换行
},
}),
//添加插件
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
//添加插件
new OptimizeCSSAssetsPlugin({})
],
};
四、编译
编译成功
$ webpack
Hash: 14356f459fdacd0931b6
Version: webpack 4.35.3
Time: 889ms
Built at: 07/24/2019 10:16:12 AM
Asset Size Chunks Chunk Names
eae72b240e59132a25b17eda6c27041e.jpg 22.4 KiB [emitted]
index.html 219 bytes [emitted]
main.bundle.js 6.25 KiB 0 [emitted] main
main.css 49 bytes 0 [emitted] main
Entrypoint main = main.css main.bundle.js
此时图片大小为 51 KiB（macOS Mojave 10.14.6 ）
五、对比图片尺寸
图片大小尺寸从51KiB变成22.4 KiB，并且 index.html能够正常显示图片。
参考链接
- 管理资源-加载图片
- image-webpack-loader
- 示例代码