Webpack5资源配置（三）

总述：wepack资源配置了四类资源加载除了js以外的配置资源，分别为asset/recource资源 ，

asset/inline资源 ，asset/source资源 ，asset通用资源类型 ，接下来，将配合前期webpack学习

系统的对以上四类资源做系统的说明

1.asset/recource资源

asset/recource资源：发送一个单独的文件 ，在webpack.config.js中module.rules中配置：

// 配置模块
  module: {
    rules:[
      // 配置后缀名为.png的图片
      {
        test:/\.png$/,
        type:'asset/resource',
        // 指定输出的文件名的方法二，generator的优先级高于output中assetModuleFilename的配置
        generator:{
          filename: 'images/[contenthash][ext]'
        }
      },
    ]
  }

2.asset/inline资源

asset/inline资源：inline这个资源类型用于导出一个资源的data url ，在webpack.config.js中

module.rules中配置：

// 配置模块
  module: {
    rules:[
      // 配置后缀名为.svg的图片
      {
        test:/\.svg$/,
        type: 'asset/inline'
      },
    ]
  }

3.asset/source资源

asset/source资源：导出资源的源代码 ，在webpack.config.js中module.rules中配置：

// 配置模块
  module: {
    rules:[
      // 导入文本文件
      {
        test:/\.txt$/,
        type: 'asset/source'
      },
    ]
  }

4.asset通用资源类型

asset通用资源类型:在导出一个资源的 Data URI 和发送一个单独的文件之间自动进行选择，

webpack按照默认条件，自动的在recource资源和inline资源之间进行选择，小于8kb的文件，将会

视为inline模块类型，否则会被视为resource模块类型，可以通过webpack配置的module rule层级

中，设置rules.parser.dataUrlCondition选项来修改此条件

// 配置模块
  module: {
    rules:[
      // 通用资源类型
      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition:{
            // 默认大小的尺寸值是4kb
            maxSize: 4*1024
          }
        }
      }
    ]
  }

资源配置完整代码：

/ 引入node.js中的path
const path = require('path')
// 引入html打包插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 指定入口文件
  entry: './src/index.js',

  // 指定出口
  output:{
    // 指定输出文件的文件名
    filename:'bundle.js',
    // 指定文件的输出路径
    path: path.resolve(__dirname, './dist'),
    // 配置再次打包时清除上一次打包的无用文件
    clean:true,
    // 重置输出的文件名的方法一
    // contenthash表示根据图片内容生成hash值
    // ext表示扩展名
    assetModuleFilename:'images/[contenthash][ext]'
  },

  // 设置webpack是开发模式
  mode: 'development',

  // 实现精准定位代码的行数
  devtool: 'inline-source-map',

  // 配置插件
  plugins:[
    new HtmlWebpackPlugin({
      // 指定模板
      template:'./index.html',
      // 输出的文件名，可根据自己的需要定义
      filename: 'app.html',
      // 指定在哪里生成script标签
      inject:'body'
    })
  ],

  // 实时监听文件修改的配置，并且网页自动刷新
  devServer: {
    // devServer指向的物理路径
    static:'./dist'
  },

  // 配置模块
  module: {
    rules:[
      // 配置后缀名为.png的图片
      {
        test:/\.png$/,
        type:'asset/resource',
        // 指定输出的文件名的方法二，generator的优先级高于output中assetModuleFilename的配置
        generator:{
          filename: 'images/[contenthash][ext]'
        }
      },
      // 配置后缀名为.svg的图片
      {
        test:/\.svg$/,
        type: 'asset/inline'
      },
      // 导入文本文件
      {
        test:/\.txt$/,
        type: 'asset/source'
      },
      // 通用资源类型
      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition:{
            // 默认大小的尺寸值是4kb
            maxSize: 4*1024
          }
        }
      }
    ]
  }
}