一個合格的Webpack4配置工程師素養：第二部分

時間 2019-11-06

標籤一個合格 webpack4 webpack 配置工程師素養第二部分欄目職業生涯简体版

原文原文鏈接

第一篇

webpack處理帶哈希值的文件名引入問題

咱們給打包的文件打上hash是爲了解決緩存更新問題，常見須要打上hash的地方有。html

output: {
    filename: 'bound.[hash:5].js',
    path: path.resolve(__dirname, 'dist')
}
複製代碼

// 提取CSS
new MiniCssExtractPlugin({
    filename: devMode ? '[name].css' : '[name].[hash:5].css', // 設置輸出的文件名
    chunkFilename: devMode ? '[id].css': '[id].[hash:5].css'
})
複製代碼

可是打上hash咱們怎麼引入是一個問題。webpack

html-webpack-plugin插件能夠把js/css注入到一個模板文件, 因此不須要再手動更改引用。web

npm i -D html-webpack-plugin
複製代碼

更改配置文件npm

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    // 打包模板
    new HtmlWebpackPlugin({
        inject: true,
        hash: true,
        cache: true,
        chunksSortMode: 'none',
        title: 'Webapck4-demo', // 能夠由外面傳入
        filename: 'index.html', // 默認index.html
        template: path.resolve(__dirname, 'index.html'),
        minify: {
            collapseWhitespace: true,
            removeComments: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true
        }
    })
],
複製代碼

設置一個模板文件。緩存

// index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
    <div id="app"></div>
</body>

</html>
複製代碼

打包後的文件:bash

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title></title>
    <link href="main.f37fa.css?f37fab3edd3ae8ecda6a" rel="stylesheet">
</head>

<body>
    <div id="app"></div>
    <script src="bound.f37fa.js?f37fab3edd3ae8ecda6a"></script>
</body>

</html>
複製代碼

webpack清理打包後的dist目錄

咱們會發現每次打包後dist文件夾都會不斷增長文件, 顯然這個方面咱們須要處理, 可是某些狀況下咱們不須要去清理, 好比坑爹的微信公衆號緩存問題。微信

npm i -D clean-webpack-plugin
複製代碼

修改配置文件app

const CleanWebpackplugin = require('clean-webpack-plugin')

plugins: [
    // 清理dist目錄
    new CleanWebpackplugin(['dist'])
]
複製代碼

webpack處理圖片以及優化

咱們這裏只是爲了測試, 在index.html模板文件添加一個dom去使用圖片。dom

// index.html
<div class="logo"></div>

// base.scss
.logo {
    background: url('../assets/logo.png') no-repeat;
    width: 100px;
    height: 100px;
    background-size: contain;
}
複製代碼

使用file-loader來處理文件的導入

npm i -D file-loader
複製代碼

修改配置文件

rules: [
    // 處理文件
    {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    // 具體配置見插件官網
                    limit: 1,
                    name: '[name]-[hash:5].[ext]',
                    outputPath: 'img/', // outputPath所設置的路徑，是相對於 webpack 的輸出目錄。
                    // publicPath 選項則被許多webpack的插件用於在生產模式下更新內嵌到css、html文件內的 url , 如CDN地址
                },
            },
        ]
    },
]    
複製代碼

下面繼續對圖片進行優化和壓縮

npm i -D image-webpack-loader
複製代碼

修改配置文件

// 處理文件
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                // 具體配置見插件官網
                limit: 10000,
                name: '[name]-[hash:5].[ext]',
                outputPath: 'img/', // outputPath所設置的路徑，是相對於 webpack 的輸出目錄。
                // publicPath 選項則被許多webpack的插件用於在生產模式下更新內嵌到css、html文件內的 url , 如CDN地址
            },
        },
        {
            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
              }
            }
        }
    ]
},
複製代碼

壓縮前圖片大小181.46kb.

壓縮後29kb.

webpack把圖片轉爲base64以及字體處理

經過把一些小的圖片轉爲base65(DataURl)能夠減小http請求, 提高訪問效率。

npm i -D url-loader
複製代碼

修改配置文件

// 處理文件
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                // 具體配置見插件官網
                limit: 10000,
                name: '[name]-[hash:5].[ext]',
                outputPath: 'img/', // outputPath所設置的路徑，是相對於 webpack 的輸出目錄。
                // publicPath 選項則被許多webpack的插件用於在生產模式下更新內嵌到css、html文件內的 url , 如CDN地址
            },
        },
        {
            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
              }
            }
        }
    ]
},
複製代碼

這裏測試的話咱們須要準備一個小的圖片便可，如上述配置所述只要小於10kb就會用base64替代。

字體處理的話配置以下：

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        // 文件大小小於limit參數，url-loader將會把文件轉爲DataUR
        limit: 10000,
        name: '[name]-[hash:5].[ext]',
        output: 'fonts/',
        // publicPath: '', 多用於CDN
    }
},
複製代碼