关于webpack:webpack-图片处理和优化

7次阅读

共计 1750 个字符，预计需要花费 5 分钟才能阅读完成。

本节咱们来学习如何在 webpack 中解决和优化图片。后面咱们讲过，webpack 中只有 JS 类型文件才可能被辨认并间接打包，其余类型的文件，例如 CSS、JS、图片等，则须要通过特定的 loader 来进行加载打包。

而在理论我的项目中，咱们也会常常用到图片，所以本节咱们就来看一下如何在 webpack 中打包图片。

在 webpack 中打包图片要用到 file-loader 或者 url-loader 加载器，这两个加载器的性能根本一样，然而还是存在一些区别：

file-loader：可能依据配置项复制应用到的资源到构建之后的文件夹，并且可能更改对应的链接。
url-loader：蕴含 file-loader 的全副性能，并且可能依据配置将合乎配置的文件转换成 Base64 形式引入，将小体积的图片 Base64 引入我的项目能够缩小 http 申请，也是一个前端罕用的优化形式。

上面咱们应用 url-loader 为例，阐明一下在 webpack 中打包图片的办法。

示例：

例如持续应用之前的 xkd_webpack 我的项目，在我的项目根目录下创立一个用于寄存图片的 images 文件夹。而后在这个文件夹上面任意增加一张图片，例如 img1.png。

而后咱们在 xkd.css 中应用这张图片，代码如下所示：

html{background: url("./images/img1.png") no-repeat center;
}

而后咱们能够执行打包命令，然而此时会报一个谬误，如下图所示：

这个谬误通知咱们，须要应用一个 loader 来解决图片这种类型的文件。所以咱们须要装置 url-loader 加载器，并在配置文件中增加相干配置。

装置 url-loader 的命令很简略，如下所示：

npm install url-loader --save-dev

装置好后，咱们须要在 webpack.config.js 文件中的 module.rules 数组中增加 url-loader 的相干配置，例如上面这段配置代码：

module:{
        rules:[
            {test: /\.(png|jpg|gif|svg)$/,
                use: 'url-loader'
            }
        ]
}

此时咱们再次执行打包命令，就能胜利进行打包啦。

尽管打包胜利，然而咱们会发现，图片 img1.png 打包后，图片名称产生了变动，变为了 85d4f87317b6c14d541b3e1bcd9d2662.png。

如果咱们心愿在打包后，图片名称不变，并且可能增加到指定目录下，能够在 rules 中增加一个 options 属性，如下所示：

module:{
        rules:[
            {test: /\.(png|jpg|gif|svg)$/,
                use:[{
                    loader: 'url-loader',
                    options: {name: 'images/[name].[ext]'
                    },
                }]
            }
        ]
}

这样咱们执行打包命令后，会在 dist 目录下生成一个 images 文件夹，文件夹中的就是打包好的图片，且图片名称和打包前放弃不变。

要优化图片其实就是管制图片的品质，压缩图片的大小。下面咱们尽管胜利将图片进行了打包，然而图片大小并没有变动。webpack 在进行打包时，会依据配置文件 webpack.config.js 中对 url-loader 的 limit 大小设置来对图片进行解决，小于 limit 的图片转化成 base64 格局，其余不做操作。对于比拟大的图片咱们能够用 image-webpack-loader 来压缩图片。

示例：

首先装置 image-webpack-loader，命令如下所示：

npm install image-webpack-loader --save-dev

而后批改 webpack.config.js 中的配置，如下所示，执行打包命令后图片就会胜利被压缩：

{test: /\.(png|jpg|gif|svg)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'images/[name].[ext]'
            }
        },
        {
            loader:'image-webpack-loader',
            options: {bypassOnDebug: true,}
         }
    ]
}

链接：https://www.9xkd.com/

正文完