摘要：另外需要指定這個參數，表示在配置的數值以下的圖片才進行編碼，超過的不進行處理。代碼如下所以過程就是引入了，然后進行打包處理，生成和。目前這個入門學習手記到這里就結束了。完相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四

本人微信公眾號：前端修煉之路，歡迎關注。

前幾天朋友聚餐突然想到，再過不到半年時間，第一批20后即將出生。這種感覺就像是，現在的90后看60后~ 一不小心我們這些90后在20后的眼中就變成了上個世紀的人。o(╯□╰)o

回顧webpack這個系列，結合自己使用的一個過程，是時候結束一下了。

我在項目中發現，有些時候css會有重復，或者不知道誰寫的根本就沒有使用過的css樣式。如果文件較小，影響不是很大。但是我有一個項目，發現其中的css有9000多行！

對于有代碼潔癖的我來說，這是不能忍受的~要是文件小的話，我還有機會可以一行行的查找，將多余的代碼刪除。可惜這個文件內容過多。好在找到了一個webpack插件mini-css-extract-plugin，這個插件結合purifycss-webpack使用，就可以滿足我的需求，將功能交給webpack去做。

mini-css-extract-plugin這個插件可以在webpack plugins中查看更多配置選項。這里我先只使用最簡單的配置項。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins: [
    new MiniCssExtractPlugin({          // css文件抽離
        filename: "css/[name].min.css",    // 指定抽離之后文件的名字和并且在css路徑之下
        chunkFilename: "css/[id].min.css",
    }),
],
module: {
    rules: [
        {
            test: /.css$/, // 因為我項目中只有css代碼，所以正則只寫css
            use: [
                {
                    loader: MiniCssExtractPlugin.loader, // 指定使用mimi-css-extract-plugin
                    options: {
                        publicPath: "../",
                        hmr: process.env.NODE_ENV === "development",    // 只在開發環境下開啟hmr
                    },
                },
                "css-loader",        // 使用css-loader
            ],
        }
    ]
}

purifycss-webpack這個插件可以去npm 官網查看更多配置項。

注：如果打開purifycss-webpack這個插件的npm說明，頁面中會提示使用extract-text-webpack-plugin這個插件，并且示例代碼也是用這個插件演示的。但其實這個插件已經廢棄了。官網推薦的使用就是上面使用的mini-css-extract-plugin這個插件。

const glob = require("glob");    // 這里一定要安裝glob-all這個插件而不是glob
const PurifyCSSPlugin = require("purifycss-webpack");

new PurifyCSSPlugin({       // css 文件去重
    paths: glob.sync(path.join(__dirname, "index.html")) // 指定html頁面，也可以使用通配符*進行匹配全部html
})

purifycss-webpack和mini-css-extract-plugin兩者結合使用，才能實現將css去重。

去重實現以后，文件縮減了不少，可是我還不滿足。因為我想在線上使用壓縮的css，進一步縮小文件的大小，節省用戶流量。如果自習閱讀剛才文檔，會發現MiniCssExtractPlugin這個插件之中有提到生成環境下使用壓縮css和js的插件。

所以我就直接使用就好了。

const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");

 optimization: {
     minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],   // js壓縮和css 壓縮
 }

css提取去重、css壓縮完成之后，又發現可以進一步優化的地方。網站中一般都會使用一些小圖標和logo，有些小圖標會做成雪碧圖，有些并不會。后來通過搜索，發現其實可以將一些足夠小的小圖標制作成base64，將小圖標寫到css文件中,從而減少http請求數量。如果手動去做這個過程，是比較繁瑣的。還好找到了url-loader這個插件。插件詳細配置可以看webpack Loaders

module: {
        rules: [
            {
                test: /.(png|jpe?g|gif|svg)$/i,    // 匹配的圖片文件類型
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 1024,  // 將1024以下的圖片制作成base64圖片，超過的不處理
                            name: "[name].[ext]",
                            outputPath: "img/",
                            publicPath: "../img/"   // 指定這個地址之后，css中的background才會變成了base64~，并且路徑使用的是這個路徑
                        },
                    }
                ]
            }
       ]
}

需要說明的是，我修改了以下正則/.(png|jpe?g|gif|svg)$/i，這樣jpg和jpeg就都能匹配到了。另外需要指定limit這個參數，表示在limit配置的數值以下的圖片才進行base64編碼，超過的不進行處理。

在這個過程中，遇到的問題就是，如果圖片沒有base64，就會造成背景圖片background中引用的url地址不正確，導致圖片引用失敗。后來經過調試發現，指定options.publicPath這個屬性，就可以正確引用了。

處理完小圖標，我想到需要處理一下大圖片。因為如果僅僅處理了小圖標，影響似乎并不大。真正占流量的其實是圖片。其實在做項目的時候，會將png圖片進行一遍壓縮。但是我之前是使用的在線工具。現在我想使用打包工具，自動化進行處理。

image-webpack-loader可以壓縮png、jpeg、gif、webp、svg。可以分別指定不同類型圖片的壓縮質量。

                    {
                        loader: "image-webpack-loader",
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: "65-90",
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }

使用完這個插件之后，確實發現我的圖片縮小了不少。

上面只是簡單的羅列出來了需要使用的各個loader和plugin。但是整個配置并不完整，完整的webpack-config.js代碼如下：

const path = require("path");
const glob = require("glob");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserJSPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const PurifyCSSPlugin = require("purifycss-webpack");

module.exports = {
    mode: "production",
    entry: {
        style: "./js/style.js",
    },
    optimization: {
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],   // css 壓縮
    },
    plugins: [
        new CleanWebpackPlugin(),               // 文件清空
        new MiniCssExtractPlugin({          // css文件抽離
            filename: "css/[name].min.css",
            chunkFilename: "css/[id].min.css",
        }),
        new PurifyCSSPlugin({       // css 文件去重
            paths: glob.sync(path.join(__dirname, "index.html")),
        })
    ],
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../",
                            hmr: process.env.NODE_ENV === "development",
                        },
                    },
                    "css-loader",
                ],
            },
            {
                test: /.(png|jpe?g|gif|svg)$/i,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 1024,
                            name: "[name].[ext]",
                            outputPath: "img/",
                            publicPath: "../img/"   // 指定這個地址之后，css中的background才會變成了base64~，并且路徑使用的是這個路徑
                        },
                    },
                    {
                        loader: "image-webpack-loader",
                        options: {
                            mozjpeg: {
                                progressive: true,
                                quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,
                            },
                            pngquant: {
                                quality: "65-90",
                                speed: 4
                            },
                            gifsicle: {
                                interlaced: false,
                            },
                            // the webp option will enable WEBP
                            webp: {
                                quality: 75
                            }
                        }
                    }
                ],
            }
        ],
    },
    output: {
        filename: "[name].min.js",
        path: path.resolve(__dirname, "./dist")
    }
};

文件的entry入口是style.js。

所有的打包文件目錄是通過output.path指定的，輸出到了dist目錄下。

在配置loader時，可以在一個正則匹配下，配置多個loader。例如我先配置了url-loader，然后配置了image-webpack-loader。

在入口文件style.js中，其實什么事情也沒有做，只是引入了需要使用的css文件。代碼如下：

import style from "../css/style.css";

所以過程就是style.js引入了style.css，然后webpack進行打包處理，生成style.min.js和style.min.css。

整個的項目結構如下：

以上就是我在項目中使用webpack的一個情況。目前這個入門學習手記到這里就結束了。

（完）

相關文章

webpack入門學習手記（一）

webpack入門學習手記（二）

webpack入門學習手記（三）

webpack入門學習手記（四）