前端工程化-Webpack 基础-打包字体、资源模块、开发服务器

以下皆为拉勾教育课件内笔记

打包字体

下载字体文件

https://www.iconfont.cn/

file-loader

module.exports = { 
  // .... 
  // 模块配置 
  module: { 
    rules: [ 
      // 匹配字体⽂件 
      { 
        test: /\.(eot|svg|ttf|woff|woff2)$/i, 
        use: { 
          loader: 'file-loader', 
          options: { 
            name: 'fonts/[name].[ext]' 
          } 
        } 
      } 
    ] 
  } 
}

copy-webpack-plugin

不需要处理的其他文件，可以直接复制到输出目录
详情查看：https://www.npmjs.com/package/copy-webpack-plugin

clean-webpack-plugin

每次打包之前，先删除输出目录中的历史文件（抱住输出目录中的打包文件是最新的）
详情查看：https://www.npmjs.com/package/clean-webpack-plugin

资源模块（asset modules）

Webpack 5 提供了一个新的特性 - 资源模块。资源模块是一种模块类型，它允许使用资源文件，即通过资源模块也可以加载图片或字体，而无需使用 loader 。

module.exports = { 
  // .... 
  // 模块配置 
  module: {
    rules: [
      // 处理图⽚
      {
        test: /\.(png|gif|jpe?g)$/i, 
        // use: { 
          // loader: "url-loader", 
          // options: { 
          // // 指定图⽚⼤⼩，⼩于该数值的图⽚，会被转成 base64 
          // limit: 8 * 1024, // 8 kb 
          // // [name] 是图⽚原来的名称 
          // // [ext] 是图⽚原来的后缀名 
          // name: "image/[name].[ext]", 
          // // url-loader 默认采⽤ ES Modules 规范进⾏解析，但是 html-loader 引⼊图⽚使⽤的是 CommonJS 规范 
          // // 解决：关闭 url-loader 默认的 ES Modules 规范，强制 url-loader 使⽤ CommonJS 规范进⾏打包 
          // esModule: false
          // } 
        // } 

        // 使⽤资源模块
        type: 'asset', 
        parser: { 
          dataUrlCondition: { 
            maxSize: 8 * 1024
          } 
        }, 
        generator: { 
          filename: "image/[name][ext]"
        }
      }, 
      // 匹配字体⽂件 
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i, 
        // use: { 
          // loader: 'file-loader',
          // options: { 
          // name: 'fonts/[name].[ext]'
          // } 
        // }

        // 使⽤资源模块处理字体⽂件
        // asset 可以在 asset/resource 和 asset/inline 之间进⾏选择
        // 如果⽂件⼩于 8kb，则使⽤ asset/inline 类型
        // 如果⽂件⼤于 8kb，则使⽤ asset/resource 类型
        type: 'asset',
        parser: { 
          dataUrlCondition: { 
            maxSize: 8 * 1024
          }
        }, 
        generator: { 
          filename: "fonts/[name][ext]" 
        } 
      }, 
    ] 
  } 
}

资源模块

资源模块(asset module)是⼀种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。详情查看：https://webpack.docschina.org/guides/asset-modules/

在 Webpack 5 之前，通常使用

raw-loader 将文件导入为字符串
url-loader 将文件作为 data URI 内联到 bundle 中
file-loader 将文件发送到输出目录

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

asset/resource 发送⼀个单独的文件并导出 URL。之前通过使用 file-loader 实现。
asset/inline 导出⼀个资源的 data URI。之前通过使用 url-loader 实现。
asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。
asset 在导出⼀个 data URI 和发送⼀个单独的文件之间自动选择。之前通过使用 url- loader，并且配置资源体积限制实现。

即：不需要上述 loader，我们在 Webpack 5 中，也可以处理图片字体等资源文件

例如：

module.exports = { 
  // ...... 
  // 模块配置 
  module: { 
    rules: [ 
      // 处理图⽚
      // {
        // test: /\.(png|gif|jpe?g)$/i, 
        // use: { 
          // loader: "url-loader", 
          // options: { 
            // // 指定图⽚⼤⼩，⼩于该数值的图⽚，会被转成 base64
            // limit: 8 * 1024, // 8 kb 
            // // [name] 是图⽚原来的名称 
            // // [ext] 是图⽚原来的后缀名
            // name: "image/[name].[ext]", 
            // // url-loader 默认采⽤ ES Modules 规范进⾏解析，但是 ht ml-loader 引⼊图⽚使⽤的是 CommonJS 规范 
            // // 解决：关闭 url-loader 默认的 ES Modules 规范，强制 url-loader 使⽤ CommonJS 规范进⾏打包 
            // esModule: false 
          // } 
        // } 
      // }, 
    
      // 通过资源模块来处理图⽚
      { 
        test: /\.(png|gif|jpe?g)$/i, 
        type: 'asset',
        // 现在，webpack 将按照默认条件，⾃动地在 resource 和 inline 之 间进⾏选择：
        // ⼩于 8kb 的⽂件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。
        // ⾃定义设置
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024
          }
        },
        generator: { 
          filename: "image/[name][ext]" // 单独指定名字
        }
      },
      // 通过资源模块来处理字体
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        // use: {
          // loader: 'file-loader', 
          // options: { 
            // name: 'fonts/[name].[ext]' 
          // } 
        // } 
        type: 'asset', 
        parser: {
          dataUrlCondition: { 
            maxSize: 8 * 1024
          }
        }, 
        generator: {
          filename: "fonts/[name][ext]" // 单独指定名字
        }
      }, 
      // ......
    ]
  }
}

开发服务器（Dev Server）

Webpack Dev Server（Webpack 开发服务器），详情查看：https://www.npmjs.com/package/webpack-dev-server
https://webpack.docschina.org/configuration/dev-server

安装

npm i webpack-dev-server -D 

# 或者 
npm i webpack-dev-server -g

运行

# webpack 4 
webpack-dev-server ... 

# webpack 5 
webpack server ...

Webpack Dev Server 将打包内容放到内存中（而非磁盘），内存的读写性能远⼤于磁盘，因此 Webpack Dev Server 的热更新效率⼤于 browser-sync

运行并自动打开浏览器：webpack server --open

为 Webpack Dev Server 指定配置

// webpack.config.js
devServer: {
  // 项⽬构建后路径
  contentBase:resolve(__dirname,'output'),
  
  // 启动 gzip 压缩 
  compress:true, 

  // 端⼝号
  port:8080, 

  // ⾃动打开浏览器 
  open: true, 

  // 开启热更新 
  // Webpack 4
  // hot: true,  
  // Webpack 5 
  liveReload: true, // 热更新（需要禁用 hot）
  target: "web", // 热更新只适用于 web 相关的 targets

  // 开启接⼝代理（解决接口跨域问题）
  proxy: {
    // http://localhost:8080/api
    '/api': { 
      // http://localhost:8080/api/users -> https://api.github.com/api/users
      target: 'https://api.github.com', 
      // http://localhost:8080/api/users -> https://api.github.com/users
      pathRewrite: {
        '^/api': ''
      },
      // 不能使⽤ localhost:8080 作为请求 GitHub 的主机名 
      changeOrigin: true 
    } 
  } 
},