一个合格的Webpack4配置工程师素养：第二部分

栏目: JavaScript · 发布时间: 5年前

内容简介：我们给打包的文件打上hash是为了解决缓存更新问题，常见需要打上hash的地方有。但是打上hash我们怎么引入是一个问题。html-webpack-plugin插件可以把js/css注入到一个模板文件, 所以不需要再手动更改引用。

我们给打包的文件打上hash是为了解决缓存更新问题，常见需要打上hash的地方有。

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我们怎么引入是一个问题。

html-webpack-plugin插件可以把js/css注入到一个模板文件, 所以不需要再手动更改引用。

npm i -D html-webpack-plugin
复制代码

更改配置文件

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>
复制代码

打包后的文件:

<!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
复制代码

修改配置文件

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

plugins: [
    // 清理dist目录
    new CleanWebpackplugin(['dist'])
]
复制代码

webpack处理图片以及优化

我们这里只是为了测试, 在index.html模板文件添加一个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
    }
},
复制代码

以上所述就是小编给大家介绍的《一个合格的Webpack4配置工程师素养：第二部分》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

The Seasoned Schemer

Daniel P. Friedman、Matthias Felleisen / The MIT Press / 1995-12-21 / USD 38.00

drawings by Duane Bibbyforeword and afterword by Guy L. Steele Jr.The notion that "thinking about computing is one of the most exciting things the human mind can do" sets both The Little Schemer (form......一起来看看《The Seasoned Schemer》这本书的介绍吧!

码农工具

JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码

HEX CMYK 转换工具

HEX CMYK 互转工具