Webpack - Loaders

优质
小牛编辑
137浏览
2023-12-01

在需要/导入模块时,可以内联配置装载程序:

加载器通过使用字符来分隔模块引用和将要运行的加载器。可以使用多个加载器,并且它们以同样用!分开。装载机从右到左执行。

在以这种方式配置加载器时要小心 - 它将应用程序不同阶段的实现细节结合在一起,因此在许多情况下可能不是正确的选择。

Webpack 配置

首选方法是通过webpack.config.js文件配置装载程序。例如,TypeScript加载器任务看起来像这样:

每个任务都有一些配置选项:

  • test - 文件路径必须匹配此条件才能处理。 这通常用于测试文件扩展名。 。
  • loader - 将用于转换输入的装载程序。 这遵循上面指定的语法。
  • include - 文件路径必须与要处理的此条件匹配。 这通常用于包括文件夹。 例如。 。

preLoaders数组的工作方式就像加载器数组一样,它是一个单独的任务链,在loader任务链之前执行。

  • raw-loader - 以字符串形式返回文件内容。
  • url-loader - 如果文件大小低于某个阈值,则返回base64编码数据URL,否则只返回文件。
  • style-loader - 在<head>标签中插入带有捆绑CSS的样式标签。