一个合格的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
    }
},
复制代码