你知道哪些webpack中常用的loader在使用webpack的过程中，我们经常会遇到一些问题：对于某个资源应该使用哪

在使用webpack的过程中，我们经常会遇到一些问题：对于某个资源应该使用哪个对应的loader？或者实现某个功能要使用哪个loader？这个时候我们就需要不仅了解这些loader的用法，更需要了解这些loader能实现什么功能，这样在遇到问题时才能立即判断出能否使用loader来解决，进而寻找到相应的loader。

babel-loader

babel-loader用于处理ES2015+并将其编译成ES5，它使我们能够使用最新的语言特性，同时不必特别关注这些特性在不同平台的兼容问题。

安装：npm install -D babel-loader @babel/core @babel/preset-env

各个模块的作用：

babel-loader：使babel与webpack协同工作
@babel/core：babel编译器的核心模块
@babel/preset-env：bebel官方推荐的预置器，可根据用户设置的目标环境自动添加所需的插件和补丁来编译ES6+代码

webpack配置如下：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory:true,
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-transform-runtime']
        }
      }
    }
  ]
}

由于babel-laoder通常属于对所有JS后缀文件设置的规则，所以需要在exclude中添加node_modules，否则会令babel-loader编译其中所有的模块，这将严重拖慢打包速度。
添加cacheDirectory配置项，它会启用缓存机制，会将转译的结果缓存到文件系统中，在重复打包未改变过的模块时防止二次编译；同时也会加快打包速度，将 babel-loader 提速至少两倍。
babel在每个文件都插入了辅助代码，使代码体积过大！你可以引入 Babel runtime 作为一个独立模块，来避免重复引入。你必须执行 npm install -D @babel/plugin-transform-runtime 来把它包含到你的项目中，然后使用 npm install @babel/runtime 把 @babel/runtime 安装为一个依赖。

babel-loader支持从.babelrc文件读取babel配置，因此可以将presets和plugins从webpack配置文件中提取出来。

ts-loader

ts-loader和babel-loader的性质类似，它是用于连接webpack和typescript的模块，通过typescript和ts-loader可以实现代码类型检查。

安装：npm install -D ts-loader typescript

webpack配置如下：

module: {
  rules: [
    {
      test: /\.ts$/,
      exclude: /node_modules/,
      use: 'ts-loader'
    }
  ]
}

需要注意的是，typescript本身的配置并不在ts-loader中，而必须放在工程目录下的tsconfig.json文件中。如：

'compilerOptions':{
  'target':'es5',
  'sourceMap':true
}

html-loader

html-loader用于将HTML文件转化成字符串并进行格式化，使得我们可以把一个HTML片段通过JS加载进来。

安装：npm install --save-dev html-loader

webpack配置如下：

module: {
  rules: [
    {
      test: /\.html$/i,
      loader: "html-loader"
    }
  ]
}

file-loader

file-loader用于打包文件类型的资源并返回其publicPath。

安装：npm install file-loader --save-dev

webpack配置如下：

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name(file) {
              if (process.env.NODE_ENV === 'development') {
                return '[path][name].[ext]';
              }
              return '[hash].[ext]';
            },
            publicPath: 'assets'
          }
        }
      ]
    }
  ]
}

name定义生成文件的文件名。默认情况下，是文件内容的 MD5 哈希值，并会保留所引用资源的原始扩展名。
publicPath用于指定资源的请求位置，目的是在最终打包后的路径引用前增加上publicPath里配置的字符串。这里的publicPath会覆盖原有的output.publicPath。

style-loader和css-loader

style-loader：将模块导出的内容作为样式并添加到 DOM 中
css-loader：加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码

安装：npm install style-loader css-loader --save-dev

webpack配置如下：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    }
  ]
}

sass-loader

sass-loader就是将sass/scss语法编译成css，因此在使用时通常还要搭配css-loader和style-loader。因为loader本身只是编译核心库和webpack的连接器，因此还要安装node-scss，node-scss是真正用来编译scss的。

安装：npm install sass-loader node-scss --save-dev

webpack5中安装变为npm install sass-loader scss --save-dev

webpack配置如下：

module: {
  rules: [
    {
      test: /\.s[ac]ss$/i,
      use: [
        // 将 JS 字符串生成为 style 节点
        'style-loader',
        // 将 CSS 转化成 CommonJS 模块
        'css-loader',
        // 将 Sass 编译成 CSS
        'sass-loader'
      ]
    }
  ]
}

如果想在浏览器的调试工具中查看源码，需要分别为sass-loader和css-loader单独添加sourceMap:true。

postcss-loader

PostCSS 是一个允许使用 JS 插件转换样式的工具。这些插件可以检查（lint）你的 CSS，支持 CSS Variables 和 Mixins，编译尚未被浏览器广泛支持的先进的 CSS 语法，内联图片，以及其它很多优秀的功能。
PostCSS 的 Autoprefixer 插件是最流行的 CSS 处理工具之一。安装：npm i autoprefixer
PostCSS 接收一个 CSS 文件并提供了一个 API 来分析、修改它的规则（通过把 CSS 规则转换成一个抽象语法树的方式）。

postcss-loader 使用 PostCSS 加载并转换 CSS/SSS 文件

安装：npm i -D postcss-loader

webpack5中安装命令：npm install --save-dev postcss-loader postcss

webpack配置如下：

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [
        'style-loader',
        'css-loader',
        'postcss-loader'
      ]
    }
  ]
}

PostCSS要求必须有一个单独的配置文件，因此需要在项目的根目录下创建一个postcss.config.js。

// postcss.config.js
module.exports={
  plugins:{
    // 为CSS自动添加厂商前缀，以便兼容浏览器
    autoprefixer:{}
  }
}