二、webpack的基本使用，资源类型（Mhua）

资源类型

webpack提供了 四种 资源类型来加载除了 js以外的资源文件，如：图片。

webpack.config.js 配置如下：

resource

通过 asset/resource 设置，打包后，生成一个单独文件，并导出 url 路径。

# 打包后 指定资源文件名，目前有两种方式：
# 方式1：通过 output 下的 assetModuleFilename 设置打包后的文件名
output: {
	filename: "bundle.js",
    path: path.resolve(__dirname, './dist'),
    clean: true,  // 每次打包前先删除 dist 目录
    
    // contenthash 表示 生成  哈希值
    // ext 表示扩展名
	assetModuleFilename: "images/[contenthash][ext]"
},

# 方式2：通过 generator 下的 filename 设置 （优先级高于 output 配置）
rules: [
	{
		// 通过正则 匹配 以 png 结尾的文件
        test: /\.png$/,
        // 使用类型
        type: "asset/resource",

        // 打包后文件命名 
        // 优先级高于 output 下 assetModuleFilename
        generator: {
          filename: "images/[contenthash][ext]"
        }
     }
]

根据上方配置文件，打包后的文件如下：

• 

inline

通过 asset/inline 设置，把对应资源文件 生成 dataUrl （base64格式）

module: {
    rules: [
      {
       // 匹配 .svg 文件，通过 asset/inline  转为 base64 格式
       test: /\.svg$/,
       // 导出资源类型的 dataurl (base64格式)
       type: "asset/inline"
      }
 	]
}

打包后，图片变成了 base64 格式

• 

source

导出资源文件的内容

module: {
    rules: [
     {
        test: /\.txt$/,
        // 导出资源的源代码
        type: "asset/source"
      }
 	]
}

asset

在resource，inline类型之间自动选择，根据资源大小来区分，默认资源大小是以 8kb 为分界线。

module: {
    rules: [
     {
     	// 正则匹配 获取 jpg 格式文件 
        test: /\.jpg$/,
        // 会根据 resource / inline 两种方式进行选择
        // 默认情况下，当资源文件大于 8k 选择 resource 模式生成资源
        // 当资源文件小于8k 选择 inline 生成 base64 数据。
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 设置临界值，超过 maxSize 就会 使用  asset/resource 模式，否则使用  asset/inline 生成 base64 代码
            maxSize: 4 * 1024 * 1024   // 4 M
          }
        }
      }
    ]
}

webpack.config.js 文件如下：

let path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  // 入口文件
  entry: "./src/index.js",
  // 打包后文件
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, './dist'),
    clean: true,  // 每次打包前先删除 dist 目录
    
    // contenthash 表示哈希值
    // ext 表示扩展名
    assetModuleFilename: "images/[contenthash][ext]"
  },

  // 模式
  mode: 'development',
  // 打包后，可以方便的调试代码。代码的位置和源文件一致。
  devtool: "inline-source-map",

  // 插件使用。
  // HtmlWebpackPlugin 用于自动生成 dist 目录下 index.html 魔板文件
  plugins: [
    new HtmlWebpackPlugin({
      // 根据魔板文件生成
      template: "./index.html",
      // 生成 dist 目录中 html 的文件名
      filename: "app.html",
      // 生成的 js 文件 引入到body标签中
      inject: "body"
    })
  ],

  // 指定 dist 作为根路径
  devServer: {
    static: "./dist"
  },

  // 配置打包 其它资源文件 规则
  module: {
    rules: [
      {
        test: /\.png$/,
        type: "asset/resource",

        // 打包后文件命名 
        // 优先级高于 output 下 assetModuleFilename
        generator: {
          filename: "images/[contenthash][ext]"
        }
      },
      {
        test: /\.svg$/,
        // 导出资源类型的 dataurl (base64格式)
        type: "asset/inline"
      },
      {
        test: /\.txt$/,
        // 导出资源的源代码
        type: "asset/source"
      },
      {
        test: /\.jpg$/,
        // 会根据 resource / inline 两种方式进行选择
        // 默认情况下，当资源文件大于 8k 选择 resource 模式生成资源
        // 当资源文件小于8k 选择 inline 生成 base64 数据。
        type: "asset",
        parser: {
          dataUrlCondition: {
            // 设置临界值，超过 maxSize 就会 使用  asset/resource 模式，否则使用  asset/inline 生成 base64 代码
            maxSize: 4 * 1024 * 1024   // 4 M
          }
        }
      }
    ]
  }
}