webpack5用url-loader(file-loader)处理图片和img-loader压缩图片

webpack-cli 4.0的版本和 webpack-dev-server 3.11.0的版本不兼容,只能用webpack@5.0 + webpack-cli@3.3.12 + webpack-dev-server@3.11.0 的环境。

url-loader 是在 file-loader 的基础上再次开发的。所以 url-loader 依赖 file-loader。

应为loader的执行是从下到上，从右到左的。所以 url-loader 要配置在前面。 img-loader 要配置在 url-loader 的后面。

项目demo : https://github.com/cisbest/webpack5-demo-img

依赖的模块(package.json)

    "devDependencies": {
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^4.3.0",
        "file-loader": "^6.1.1",
        "html-webpack-plugin": "^4.5.0",
        "imagemin": "^7.0.1",
        "imagemin-gifsicle": "^7.0.0",
        "imagemin-mozjpeg": "^9.0.0",
        "imagemin-pngquant": "^9.0.1",
        "imagemin-svgo": "^8.0.0",
        "img-loader": "^3.0.2",
        "mini-css-extract-plugin": "^1.0.0",
        "url-loader": "^4.1.1",
        "webpack": "^5.0.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"
    }

项目结构

    webpack5-demo-img
    |   package.json
    |   webpack.config.js
    |   
    +---public
    |       favicon.ico
    |       index.html
    |       
    +---src
    |   |   main.css
    |   |   main.js
    |   |   
    |   ---assets
    |           
    ---test-build-serve
        |   app.js
        |   package.json
        |   
        ---static

在js中使用图片

// main.js
    import "./main.css";

    // 在js中使用图片
    import mayi from "./assets/mayi.jpeg";
    let MAYI = new Image();
    MAYI.src = mayi;
    document.getElementById("js-img").appendChild(MAYI);

webpack配置文件

// webpack.config.js
    const webpack = require("webpack");
    const path = require("path");
    const htmlWebpackPlugin = require("html-webpack-plugin"); // 生成.html文件的插件
    const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 把样式提取为单独的css文件 的插件
    const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 清除构建目录的插件
    module.exports = {
        entry: "./src/main.js", // 打包入口文件
        mode: "development", // 使用开发模式
        devServer: {
            // 本地服务器代理
            contentBase: path.join(__dirname, "./test-build-serve/static"), //指定在哪个目录下找要加载的文件
            compress: true,
            port: 8080, // 配置端口
            hot: true, // 配置热更新
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: "[name].css",
                ignoreOrder: false,
            }),
            new htmlWebpackPlugin({
                favicon: "./public/favicon.ico",
                filename: "index.html",
                template: "./public/index.html",
            }),
            new CleanWebpackPlugin(),
        ],
        module: {
            rules: [
                {
                    test: /.css$/,
                    use: [MiniCssExtractPlugin.loader, "css-loader"], // 处理css的loader
                },
                {
                    test: /.(gif|png|jpe?g)$/i,
                    use: [
                        {
                            // 用 url-loader 处理图片
                            loader: "url-loader", // url-loader 依赖于  file-loader 要使用url-loader必须安装file-loader
                            options: {
                                name: "[name].[hash:16].[ext]", // 文件名.hash.文件扩展名 默认格式为[hash].[ext]，没有文件名
                                limit: 1024 * 8, // 将小于8KB的图片转换成base64的格式
                                outputPath: "assets/imgs", // 为你的文件配置自定义 output 输出目录 ; 用来处理图片路径问题
                                publicPath: "assets/imgs", // 为你的文件配置自定义 public 发布目录 ; 用来处理图片路径问题
                            },
                        },
                        {
                            // 用 img-loader 压缩图片
                            loader: "img-loader",
                            options: {
                                plugins: [
                                    require("imagemin-pngquant")({
                                        //压缩 png 的插件
                                        speed: 4, // 取值范围 1-11  值越大压缩率越小 ，值越小压缩生成的文件越小 默认为4
                                    }),
                                    require("imagemin-gifsicle")({
                                        // 压缩 gif 插件
                                        optimizationLevel: 1, // 取值范围 1、2、3 默认1   3极限压缩,压缩和图片效果不好，使用默认1就行
                                    }),
                                    require("imagemin-mozjpeg")({
                                        // 压缩 jpg 插件
                                        quality: 50, // 1-100   值越大压缩率越小 ，值越小压缩生成的文件越小
                                    }),
                                ],
                            },
                        },
                    ],
                },
            ],
        },
        output: {
            path: path.join(__dirname, "./test-build-serve/static"),
            filename: "app.[hash:16].js",
            publicPath: "/", // 也可以用来处理路径问题，加在所有文件路径前的根路径
        },
    };

imagemin-mozjpeg、imagemin-gifsicle、imagemin-pngquant 依赖 imagemin

url-loader参考: https://www.webpackjs.com/loaders/url-loader/ https://www.npmjs.com/package/url-loader

file-loader参考: https://www.webpackjs.com/loaders/file-loader/ https://www.npmjs.com/package/file-loader

img-loader参考: https://www.npmjs.com/package/img-loader

imagemin-mozjpeg配置项参考: https://www.npmjs.com/package/imagemin-mozjpeg

imagemin-gifsicle配置项参考: https://www.npmjs.com/package/imagemin-gifsicle

imagemin-pngquant配置项参考: https://www.npmjs.com/package/imagemin-pngquant