【webpack学习记录】什么是loader

loader是什么

官方说明webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。

如何配置loader

在webpack的配置文件中module.rules下添加规则

  module: {
    rules: [{
      test: /\.(png|jpg|gif)$/, // 使用正则表达式命中需要loader处理的文件
      use: {
        loader: 'file-loader',
        options: {
        	name: '[name].[ext]', // 配置打包后文件名。 [name][ext]皆为占位符,类似变量,每个loader有自己对应的占位符，通过文档或者源码可查看。
        	outputPath: '', // 打包后的文件的路径
      	} // loader的参数,打包时的一些配置 需要找对应的loader文档了解相关配置
    }]
  }

需要在项目开发依赖中安装对应loader