17-webpack 压缩图片

在 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能够正常显示图片。

扫描二维码关注公众号，回复： 12417235 查看本文章

参考链接

• 管理资源-加载图片
• image-webpack-loader
• 示例代码