乐趣区

webpack-图片字体多媒体等资源的处理

  1. css 或 js 中引入的图片、字体、多媒体等静态资源,统一使用 url-loader 处理。

    配置了 url-loader 以后,webpack 编译时可以自动将小文件转成 base64 编码,减少网络请求。如果不需要将小文件转成 base64,也可以用 file-loader 替换 url-loader。

    1. 安装依赖包

      url-loader 内部会自动调用 file-loader,所以仍然需要安装。

      yarn add url-loader file-loader -D
    2. 添加配置

      // 处理图片 (file-loader 来处理也可以,url-loader 更适合图片)
      {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/assets/images/[name].[hash:7].[ext]',
        },
      },
      // 处理多媒体文件
      {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: 'static/assets/media/[name].[hash:7].[ext]',
        },
      },
      // 处理字体文件
      {test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          loader: 'url-loader',
          options: {
              limit: 10000,
              name: 'static/assets/fonts/[name].[hash:7].[ext]'
          }
      },
    3. js 中使用到静态资源,需要通过 import、require 导入再使用,才会被处理。

      import img from 'xxx/xxx/123.jpg' 或 let img = require('xxx/xxx/123.jpg')
  2. 对于直接在 html 页面中通过标签引入的图片或其它静态资源,即使配置了 url-loader,webpack 也不会去处理它们,可以使用 html-loader 处理。

    1. 安装依赖包

      yarn add html-loader -D
    2. 添加配置

      // html 中引用的静态资源在这里处理, 默认配置参数 attrs=img:src, 处理图片的 src 引用的资源.
      {
          test: /\.html$/,
          loader: 'html-loader',
          options: {// 除了 img 的 src, 还可以继续配置处理更多 html 引入的资源 ( 不能在页面直接写路径, 又需要 webpack 处理怎么办? 先 require 再 js 写入).
              attrs: ['img:src', 'img:data-src', 'audio:src'],
              minimize: false,
              removeComments: true,
              collapseWhitespace: false
          }
      }
  3. 静态资源的访问路径问题

    经过上面的处理,静态资源处理基本没有问题了,webpack 编译时将会将文件打包到你指定的生成目录,但是不同位置的路径 url 会是一个问题。全部通过绝对路径访问即可,在 output 下的 publicPath 填上适当的 server 端头,来保证所有静态资源文件能被访问到,具体要根据服务器部署的目录结构来做修改。

    output: {path: path.resolve(__dirname, 'dist'), // 输出目录的配置,模板、样式、脚本、图片等资源的路径配置都相对于它
     publicPath: '/', // 模板、样式、脚本、图片等资源对应的 server 上的路径
    }
退出移动版