博客站

在 Webpack 中，Loader 用于处理各种类型的文件，将其转换为 Webpack 可以处理的模块。以下是一些常用的 Loader 及其作用：

1. 处理 JavaScript

babel-loader

• 作用：将 ES6 代码转换为 ES5，兼容旧版浏览器。
• 安装：

  npm install babel-loader @babel/core @babel/preset-env --save-dev
  

• 配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  };
  

2. 处理 CSS

css-loader

• 作用：解析 CSS 文件，处理 @import 和 url()。
• 安装：

  npm install css-loader --save-dev
  

• 配置：

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

style-loader

• 作用：将 CSS 插入到 DOM 中。
• 安装：

  npm install style-loader --save-dev
  

• 配置：与 css-loader 配合使用（见上例）。

sass-loader

• 作用：将 SCSS/SASS 文件编译为 CSS。
• 安装：

  npm install sass-loader sass --save-dev
  

• 配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /.scss$/,
          use: ['style-loader', 'css-loader', 'sass-loader']
        }
      ]
    }
  };
  

3. 处理图片

file-loader

• 作用：处理文件（如图片、字体），将其输出到输出目录。
• 安装：

  npm install file-loader --save-dev
  

• 配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /.(png|jpe?g|gif|svg)$/,
          use: ['file-loader']
        }
      ]
    }
  };
  

url-loader

• 作用：类似于 file-loader，但可以将小文件转换为 Base64 URL，减少 HTTP 请求。
• 安装：

  npm install url-loader --save-dev
  

• 配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /.(png|jpe?g|gif|svg)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192 // 小于 8KB 的文件转换为 Base64 URL
              }
            }
          ]
        }
      ]
    }
  };
  

4. 处理字体

file-loader

• 作用：处理字体文件。
• 配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /.(woff|woff2|eot|ttf|otf)$/,
          use: ['file-loader']
        }
      ]
    }
  };
  

5. 处理 HTML

html-loader

• 作用：处理 HTML 文件，导出为字符串。
• 安装：

  npm install html-loader --save-dev
  

• 配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /.html$/,
          use: ['html-loader']
        }
      ]
    }
  };
  

6. 处理 TypeScript

ts-loader

• 作用：将 TypeScript 编译为 JavaScript。
• 安装：

  npm install ts-loader typescript --save-dev
  

• 配置：

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

7. 处理 JSON

json-loader

• 作用：处理 JSON 文件（Webpack 5 已内置支持，无需额外配置）。
• 安装：

  npm install json-loader --save-dev
  

• 配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /.json$/,
          use: 'json-loader'
        }
      ]
    }
  };
  

8. 处理 Markdown

markdown-loader

• 作用：将 Markdown 文件转换为 HTML。
• 安装：

  npm install markdown-loader --save-dev
  

• 配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /.md$/,
          use: 'markdown-loader'
        }
      ]
    }
  };
  

9. 处理 Vue 文件

vue-loader

• 作用：处理 .vue 单文件组件。
• 安装：

  npm install vue-loader vue-template-compiler --save-dev
  

• 配置：

  const { VueLoaderPlugin } = require('vue-loader');
  
  module.exports = {
    module: {
      rules: [
        {
          test: /.vue$/,
          use: 'vue-loader'
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin()
    ]
  };
  

10. 处理其他文件

raw-loader

• 作用：将文件作为字符串导入。
• 安装：

  npm install raw-loader --save-dev
  

• 配置：

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

总结

常用的 Loader 包括：

• JavaScript：babel-loader、ts-loader
• CSS：css-loader、style-loader、sass-loader
• 图片：file-loader、url-loader
• 字体：file-loader
• HTML：html-loader
• TypeScript：ts-loader
• Vue：vue-loader
• 其他：json-loader、markdown-loader、raw-loader

根据项目需求，选择合适的 Loader 来处理不同类型的文件。