图片/字体等静态资源文件处理

webpack 4
1.file-loader: 解决图片引入问题，并将图片 copy 到指定目录，默认为 dist

2.url-loader:指定在文件大小小于指定的限制时，返回 DataURL

3.raw-loader: A loader for webpack that allows importing files as a String.
例子：
file.js

import txt from './file.txt';

webpack.config.js

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        use: 'raw-loader',
      },
    ],
  },
};

webpack 5
！！！内置了资源处理模块，file-loader 和 url-loader 都可以不用安装
webpack5 新增资源模块(asset module)，允许使用资源文件（字体，图标等）而无需配置额外的 loader。
资源模块支持以下四个配置：
1.asset/resource 将资源分割为单独的文件导出url,类似file-loader功能
2.asset/inline 资源导出为 dataUrl 类似url-loader功能
3.asset/source 资源导出为源码(source code),类似raw-loader功能
4.asset 根据文件大小选择使用哪种类型，当文件小于8kb(默认)的时候使用 asset/inline , 否则使用asset/resource
例：

// ./src/index.js

const config = {
  // ...
  module: { 
    rules: [
      // ... 
      {
        test: /\.(jpe?g|png|gif)$/i,
        type: 'asset',
        generator: {
          // 输出文件位置以及文件名
          // [ext] 自带 "." 这个与 url-loader 配置不同
          filename: "[name][hash:8][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 50 * 1024 //超过50kb不转 base64
          }
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        type: 'asset',
        generator: {
          // 输出文件位置以及文件名
          filename: "[name][hash:8][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 超过100kb不转 base64
          }
        }
      },
    ]
  },
  // ...
}

module.exports = (env, argv) => {
  console.log('argv.mode=',argv.mode) // 打印 mode(模式) 值
  // 这里可以通过不同的模式修改 config 配置
  return config;
}