webpack4--图片，字体处理

文章简要：

1、图片处理 和 Base64编码
2、图片压缩
3、合成雪碧图
4、处理字体

图片处理

安装url-loader

cnpm i url-loader --save-dev //url-loader包含了file-loader

配置loader

{
            test: /\.(png|jpg|jpeg|gif|svg)$/,
            use: [{
                  loader: "url-loader",
                  options: {
                    limit: 5000,  //小于该值的图片会使用base64编码，5000/1024k大约5kb
                    name: '[name].[hash:8].[ext]',  //打包后的图片名称 [ext]指图片格式
                    outputPath: "static/img/"//这个是图片输出地址，图片路径不对时候需要注意
                  }
                }]
        }

图片压缩
首先安装需要的loader（img-loader），需要压缩哪些图片格式还需要要安装对应的loader，这里统一安装全部（基本是）

npm install img-loader imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo imagemin --save-dev

配置loader

{
            test: /\.(png|jpg|jpeg|gif|svg)$/,
            use: [{
                  loader: "url-loader",
                  options: {
                    limit: 5000,  //小于该值的图片会使用base64编码，5000/1024k大约5kb
                    name: '[name].[hash:8].[ext]',  //打包后的图片名称 [ext]指图片格式
                    outputPath: "static/img/"//这个是图片输出地址，图片路径不对时候需要注意
                  }
                },{
                    loader: 'img-loader',
                    options: {
                      plugins: [
                        require('imagemin-mozjpeg')({//这个是处理图片的格式jpeg，需要处理哪些格式都需要在此配置，
                          quality: "80" // 压缩质量，这个是压缩图片80%
                        }),
                        require('imagemin-pngquant')({
                           floyd: 0.5,
                           speed: 2
                         })
                      ]
                    }
                  }
              }]
        }

处理字体

{
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: [
              {
                loader: "url-loader",
                options: {
                  name: '[name].[hash:8].[ext]',
                  limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
                  outputPath: "static/fonts/" //文字输出路径
                }
              }
            ]
          }

处理字体跟处理图片用的都是url-loader，所以有时候放在一起配置也是可以的。

雪碧图处理
有2种方法，这里我们用postcss-loader的插件postcss-sprites，首先安装

cnpm i postcss-sprites --save-dev

配置loader

{
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: [require("postcss-sprites")({
                            spritePath: "./dist/static/img",
                        })]
                    }
                }

打包就可以看到效果。这样做其实还有很多问题，怎么引用？怎么设置样式呢？
推荐一篇文章，讲的很详细：
http://www.yvonne.party/2019/07/07/webpack-sprites/

本文关于css的处理是提取css到一个文件，打包到dist/static/css文件夹下
打包后的目录如下：

打包后目录.png

顺带说下处理css的loader配置如下：（为了说明路径）

{
            test:/\.(sa|sc|c)ss$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,//MiniCssExtractPlugin.loader
                    options: {
                        publicPath: '../../',   //这个地方要注意
                    }
                },
                {
                 loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
                },
                {
                 loader: "sass-loader" // 将 Sass 编译成 CSS
                },
                {
                    loader: "postcss-loader" // 将 Sass 编译成 CSS
                }
               ]
        }

需要注意的是 css的输出路径publicPath: '../../'，这个路径一定要配置正确，关系到图片和字体的引用路径。

看上图打包后的目录图片，我css打包后在static/css/文件夹下，所以我这里publicPath: '../../'