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