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

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

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

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

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

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

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

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$/, // 因?yàn)槲翼?xiàng)目中只有css代碼，所以正則只寫css
            use: [
                {
                    loader: MiniCssExtractPlugin.loader, // 指定使用mimi-css-extract-plugin
                    options: {
                        publicPath: "../",
                        hmr: process.env.NODE_ENV === "development",    // 只在開發(fā)環(huán)境下開啟hmr
                    },
                },
                "css-loader",        // 使用css-loader
            ],
        }
    ]
}

purifycss-webpack這個插件可以去npm 官網(wǎng)查看更多配置項(xiàng)。

注：如果打開purifycss-webpack這個插件的npm說明，頁面中會提示使用extract-text-webpack-plugin這個插件，并且示例代碼也是用這個插件演示的。但其實(shí)這個插件已經(jīng)廢棄了。官網(wǎng)推薦的使用就是上面使用的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頁面，也可以使用通配符*進(jìn)行匹配全部html
})

purifycss-webpack和mini-css-extract-plugin兩者結(jié)合使用，才能實(shí)現(xiàn)將css去重。

去重實(shí)現(xiàn)以后，文件縮減了不少，可是我還不滿足。因?yàn)槲蚁朐诰€上使用壓縮的css，進(jìn)一步縮小文件的大小，節(jié)省用戶流量。如果自習(xí)閱讀剛才文檔，會發(fā)現(xiàn)MiniCssExtractPlugin這個插件之中有提到生成環(huán)境下使用壓縮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壓縮完成之后，又發(fā)現(xiàn)可以進(jìn)一步優(yōu)化的地方。網(wǎng)站中一般都會使用一些小圖標(biāo)和logo，有些小圖標(biāo)會做成雪碧圖，有些并不會。后來通過搜索，發(fā)現(xiàn)其實(shí)可以將一些足夠小的小圖標(biāo)制作成base64，將小圖標(biāo)寫到css文件中,從而減少http請求數(shù)量。如果手動去做這個過程，是比較繁瑣的。還好找到了url-loader這個插件。插件詳細(xì)配置可以看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這個參數(shù)，表示在limit配置的數(shù)值以下的圖片才進(jìn)行base64編碼，超過的不進(jìn)行處理。

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

處理完小圖標(biāo)，我想到需要處理一下大圖片。因?yàn)槿绻麅H僅處理了小圖標(biāo)，影響似乎并不大。真正占流量的其實(shí)是圖片。其實(shí)在做項(xiàng)目的時候，會將png圖片進(jìn)行一遍壓縮。但是我之前是使用的在線工具。現(xiàn)在我想使用打包工具，自動化進(jìn)行處理。

image-webpack-loader可以壓縮png、jpeg、gif、webp、svg?？梢苑謩e指定不同類型圖片的壓縮質(zhì)量。

                    {
                        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
                            }
                        }
                    }

使用完這個插件之后，確實(shí)發(fā)現(xiàn)我的圖片縮小了不少。

上面只是簡單的羅列出來了需要使用的各個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中，其實(shí)什么事情也沒有做，只是引入了需要使用的css文件。代碼如下：

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

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

整個的項(xiàng)目結(jié)構(gòu)如下：

以上就是我在項(xiàng)目中使用webpack的一個情況。目前這個入門學(xué)習(xí)手記到這里就結(jié)束了。

（完）

相關(guān)文章

webpack入門學(xué)習(xí)手記（一）

webpack入門學(xué)習(xí)手記（二）

webpack入門學(xué)習(xí)手記（三）

webpack入門學(xué)習(xí)手記（四）