webpack入門學習手記(五)

webpack

本人微信公衆號: 前端修煉之路,歡迎關注。

前幾天朋友聚餐忽然想到,再過不到半年時間,第一批20後即將出生。這種感受就像是,如今的90後看60後~ 一不當心咱們這些90後在20後的眼中就變成了上個世紀的人。o(╯□╰)ocss

回顧webpack這個系列,結合本身使用的一個過程,是時候結束一下了。html

css優化

我在項目中發現,有些時候css會有重複,或者不知道誰寫的根本就沒有使用過的css樣式。若是文件較小,影響不是很大。可是我有一個項目,發現其中的css有9000多行!前端

對於有代碼潔癖的我來講,這是不能忍受的~要是文件小的話,我還有機會能夠一行行的查找,將多餘的代碼刪除。惋惜這個文件內容過多。好在找到了一個webpack插件mini-css-extract-plugin,這個插件結合purifycss-webpack使用,就能夠知足個人需求,將功能交給webpack去作。webpack

mini-css-extract-plugin

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

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

purifycss-webpack這個插件能夠去npm 官網查看更多配置項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-webpackmini-css-extract-plugin二者結合使用,才能實現將css去重。segmentfault

optimize-css-assets-webpack-plugin

去重實現之後,文件縮減了很多,但是我還不知足。由於我想在線上使用壓縮的css,進一步縮小文件的大小,節省用戶流量。若是自習閱讀剛纔文檔,會發現MiniCssExtractPlugin這個插件之中有提到生成環境下使用壓縮css和js的插件。微信

因此我就直接使用就行了。svg

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

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

圖片優化

url-loader

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,這樣jpgjpeg就都能匹配到了。另外須要指定limit這個參數,表示在limit配置的數值如下的圖片才進行base64編碼,超過的不進行處理。

在這個過程當中,遇到的問題就是,若是圖片沒有base64,就會形成背景圖片background中引用的url地址不正確,致使圖片引用失敗。後來通過調試發現,指定options.publicPath這個屬性,就能夠正確引用了。

image-webpack-loader

處理完小圖標,我想到須要處理一下大圖片。由於若是僅僅處理了小圖標,影響彷佛並不大。真正佔流量的實際上是圖片。其實在作項目的時候,會將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
                            }
                        }
                    }

使用完這個插件以後,確實發現個人圖片縮小了很多。

整個配置

上面只是簡單的羅列出來了須要使用的各個loaderplugin。可是整個配置並不完整,完整的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.jsstyle.min.css

整個的項目結構以下:

項目目錄


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

(完)

相關文章

webpack入門學習手記(一)

webpack入門學習手記(二)

webpack入門學習手記(三)

webpack入門學習手記(四)

相關文章
相關標籤/搜索