webpack入门学习手记（五）

时间  2019-11-10
标签 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-webpack和mini-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，这样jpg和jpeg就都能匹配到了。另外须要指定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
                            }
                        }
                    }

使用完这个插件以后，确实发现个人图片缩小了很多。

整个配置

上面只是简单的罗列出来了须要使用的各个loader和plugin。可是整个配置并不完整，完整的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.js和style.min.css。

整个的项目结构以下：

项目目录

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

（完）

相关文章

webpack入门学习手记（一）

webpack入门学习手记（二）

webpack入门学习手记（三）

webpack入门学习手记（四）

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程