webpack常用loader

Webpack 常用 Loader 指南

1. 样式处理Loader

// 1. style-loader
// 将CSS注入到DOM中
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

// 2. css-loader
// 解析CSS文件
{
  test: /\.css$/,
  use: ['css-loader']
}

// 3. less-loader
// 处理Less文件
{
  test: /\.less$/,
  use: ['style-loader', 'css-loader', 'less-loader']
}

// 4. sass-loader
// 处理Sass/SCSS文件
{
  test: /\.s[ac]ss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

// 5. postcss-loader
// 使用PostCSS处理CSS
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'postcss-loader']
}

2. 文件处理Loader

// 1. file-loader
// 处理文件
{
  test: /\.(png|jpg|gif)$/,
  use: ['file-loader']
}

// 2. url-loader
// 将文件转换为base64
{
  test: /\.(png|jpg|gif)$/,
  use: [{
    loader: 'url-loader',
    options: {
      limit: 8192
    }
  }]
}

// 3. raw-loader
// 将文件作为字符串导入
{
  test: /\.txt$/,
  use: ['raw-loader']
}

// 4. svg-url-loader
// 处理SVG文件
{
  test: /\.svg$/,
  use: ['svg-url-loader']
}

3. 编译转换Loader

// 1. babel-loader
// 转换ES6+代码
{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
}

// 2. ts-loader
// 处理TypeScript
{
  test: /\.ts$/,
  use: ['ts-loader']
}

// 3. coffee-loader
// 处理CoffeeScript
{
  test: /\.coffee$/,
  use: ['coffee-loader']
}

4. 模板处理Loader

// 1. html-loader
// 处理HTML文件
{
  test: /\.html$/,
  use: ['html-loader']
}

// 2. pug-loader
// 处理Pug模板
{
  test: /\.pug$/,
  use: ['pug-loader']
}

// 3. handlebars-loader
// 处理Handlebars模板
{
  test: /\.hbs$/,
  use: ['handlebars-loader']
}

5. 代码检查Loader

// 1. eslint-loader
// 使用ESLint检查代码
{
  test: /\.js$/,
  use: ['eslint-loader'],
  enforce: 'pre'
}

// 2. tslint-loader
// 使用TSLint检查TypeScript
{
  test: /\.ts$/,
  use: ['tslint-loader'],
  enforce: 'pre'
}

6. 框架特定Loader

// 1. vue-loader
// 处理Vue单文件组件
{
  test: /\.vue$/,
  use: ['vue-loader']
}

// 2. angular2-template-loader
// 处理Angular模板
{
  test: /\.ts$/,
  use: ['angular2-template-loader']
}

// 3. react-hot-loader
// 支持React热重载
{
  test: /\.jsx$/,
  use: ['react-hot-loader']
}

7. 数据转换Loader

// 1. json-loader
// 处理JSON文件
{
  test: /\.json$/,
  use: ['json-loader']
}

// 2. csv-loader
// 处理CSV文件
{
  test: /\.csv$/,
  use: ['csv-loader']
}

// 3. xml-loader
// 处理XML文件
{
  test: /\.xml$/,
  use: ['xml-loader']
}

8. 最佳实践

// 1. 使用loader顺序
{
  test: /\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    },
    'postcss-loader'
  ]
}

// 2. 使用loader选项
{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      presets: ['@babel/preset-env']
    }
  }
}

// 3. 使用loader链
{
  test: /\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader'
  ]
}

9. 常见问题

// 1. loader顺序问题
// 解决方案：注意loader执行顺序，从后往前执行

// 2. 性能问题
// 解决方案：使用cache-loader，合理配置exclude

// 3. 兼容性问题
// 解决方案：检查loader版本，使用兼容配置

总结

选择loader时需要考虑：

1. 文件类型
2. 处理需求
3. 性能影响
4. 维护成本
5. 社区活跃度
6. 文档完善度
7. 版本兼容性
8. 使用复杂度