webpack中loader作用

Webpack中的loader用于将不同种类的非JavaScript文件转换为Webpack可处理的模块，以便在打包后的bundle中使用。

例如，当我们在Webpack中引入一个CSS文件时，Webpack默认无法处理它，因为它只能处理JavaScript模块。这时我们就需要使用一个CSS loader来将CSS文件转换为JavaScript模块，以方便Webpack进行处理。

除了CSS，Webpack还可以使用loader来处理许多其他类型的文件，如图片、字体、XML、JSON等。

使用loader的方式是在Webpack配置文件中配置一个rules属性，其中包含一组规则，每个规则指定一个文件类型及其对应的loader。例如：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader'
      ]
    },
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        'file-loader'
      ]
    }
  ]
}

上面的配置说明了当Webpack遇到CSS文件时，先使用css-loader将CSS文件转换为JavaScript模块，再使用style-loader将该模块转换为一个内联的style标签；当Webpack遇到图片文件时，直接使用file-loader将图片文件复制到输出目录中，并返回该文件的URL地址。