webpack处理字体图标

webpack处理字体图标

在讲webpack处理字体图标之前先讲一下css文件的压缩

默认打包的css文件是不压缩的，即便是生产环境也只是压缩js和html 压缩css文件使用插件： optimize-css-assets-webpack-plugin 如果只是单独使用了这个插件，那么js反而又不压缩了，所以还需要用到压缩js的插件： terser-webpack-plugin

// 安装之后再 webpack.config.js中引入
// 压缩css
let OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

// 压缩js
const TerserPlugin = require('terser-webpack-plugin');

！注意：这两个插件不是配置在plugins中，而是单独配置在另一个属性 optimization 中

// 优化
  optimization: {
    minimize: true, // 是否压缩(这个属性很重要)
    minimizer: [
      new OptimizeCssAssetsPlugin(), // 压缩css文件
      new TerserPlugin(), // 压缩js
    ]
  },

处理图片及字体图标

处理图片和字体图片时统一需要使用到加载器： file-loader 下载之后 rules 属性中进行配置

// 加载图片
{
   test: /\.(jpe?g|png|gif)$/,
   // use: 'file-loader'  // 直接这样写打包后的图片名是一串hash值
   use: {
      loader: 'file-loader',
      options: {
         // 打包后的图片放在 imgs下
         // 图片名跟格式和打包前保持一致
         name: 'imgs/[name].[ext]',
        }
     }
},
// 加载字体图标
{
  test: /\.(eot|ttf|svg|woff)$/,
  use: {
  loader: 'file-loader',
  options: {
    // 打包后的字体图标放在 icon 目录下
    // 文件名跟格式和打包前保持一致
    name: 'icon/[name].[ext]',
   }
  }
},

只是单独使用加载器 file-loader 处理的图片最后都是通过http请求去获取的。 使用 url-loader 可以将图片转为base64格式，从而减少http请求。

// 加载图片
{
  test: /\.(jpe?g|png|gif)$/,
  // use: 'file-loader'  // 直接这样写打包后的图片名是一串hash值
  use: {
     loader: 'url-loader',
     options: {
        name: 'imgs/[name].[ext]',
        limit: 10*1024 // 小于10kb的图片会被转为base64格式（且不存放下imgs目录下），大于这个数的图片则默认用file-loader 处理
        }
     }
 },