前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【第13期】webpack入门学习手记(五)

【第13期】webpack入门学习手记(五)

作者头像
siberiawolf
发布2020-03-24 17:13:41
1.4K0
发布2020-03-24 17:13:41
举报
文章被收录于专栏:前端修炼之路

webpack

本人微信公众号:前端修炼之路,欢迎关注。

前几天朋友聚餐突然想到,再过不到半年时间,第一批20后即将出生。这种感觉就像是,现在的90后看60后~ 一不小心我们这些90后在20后的眼中就变成了上个世纪的人。o(╯□╰)o

回顾webpack这个系列,结合自己使用的一个过程,是时候结束一下了。

css优化

我在项目中发现,有些时候css会有重复,或者不知道谁写的根本就没有使用过的css样式。如果文件较小,影响不是很大。但是我有一个项目,发现其中的css有9000多行!

对于有代码洁癖的我来说,这是不能忍受的~要是文件小的话,我还有机会可以一行行的查找,将多余的代码删除。可惜这个文件内容过多。好在找到了一个webpack插件mini-css-extract-plugin,这个插件结合purifycss-webpack使用,就可以满足我的需求,将功能交给webpack去做。

mini-css-extract-plugin

mini-css-extract-plugin这个插件可以在webpack plugins中查看更多配置选项。这里我先只使用最简单的配置项。

代码语言:javascript
复制
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 官网查看更多配置项。

注:如果打开purifycss-webpack这个插件的npm说明,页面中会提示使用extract-text-webpack-plugin这个插件,并且示例代码也是用这个插件演示的。但其实这个插件已经废弃了。官网推荐的使用就是上面使用的mini-css-extract-plugin这个插件。

代码语言:javascript
复制
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去重。

optimize-css-assets-webpack-plugin

去重实现以后,文件缩减了不少,可是我还不满足。因为我想在线上使用压缩的css,进一步缩小文件的大小,节省用户流量。如果自习阅读刚才文档,会发现MiniCssExtractPlugin这个插件之中有提到生成环境下使用压缩css和js的插件。

所以我就直接使用就好了。

代码语言:javascript
复制
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

代码语言:javascript
复制
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。可以分别指定不同类型图片的压缩质量。

代码语言:javascript
复制
{
     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代码如下:

代码语言:javascript
复制
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文件。代码如下:

代码语言:javascript
复制
import style from '../css/style.css';

所以过程就是style.js引入了style.css,然后webpack进行打包处理,生成style.min.jsstyle.min.css

整个的项目结构如下:

项目目录


以上就是我在项目中使用webpack的一个情况。目前这个入门学习手记到这里就结束了。

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-07-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端修炼之路 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • css优化
    • mini-css-extract-plugin
      • purifycss-webpack
        • optimize-css-assets-webpack-plugin
        • 图片优化
          • url-loader
            • image-webpack-loader
            • 整个配置
            相关产品与服务
            文件存储
            文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档