6.webpack图片处理

最新推荐文章于 2024-09-22 09:40:41 发布

原创最新推荐文章于 2024-09-22 09:40:41 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用Webpack处理和优化项目中的图片资源。通过配置url-loader和img-loader，实现图片的base64编码及压缩，同时确保html文件中的图片路径正确解析。详细展示了Webpack配置示例，包括loader设置和插件使用。

url-loader：可以替代file-loader，打包图片文件

img-loader：压缩图片

html-loader：使html文件中引入的图片得到处理

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');


module.exports = {
    entry: {
        index: './index.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name][hash:5].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(jpg||png||jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name][hash:5].[ext]',  //单独抽离图片名称
                            limit: 10, //限制图片大小 <=?kb 进行base64编码，大于则单独抽取出来
                            outputPath: 'images',
                            esModule: false   //解决html中img src为"[object Module]"
                        }
                    },
                    {
                        loader: 'img-loader',
                        options: {
                            plugins: [
                                require('imagemin-pngquant')({
                                    quality: [0.4, 0.7]   //质量范围
                                  }),
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            attrs: ['img:src']
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
        }),
        new CleanWebpackPlugin()
    ],
    mode: 'development'
}