loader

loaderwebpack 能够去处理那些非 Javescript 文件(webpack 自身只理解 Javascript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你可以利用 webpack 的打包能力,对它们进行处理。

注意,loader 能够 import 导入任何类型的模块(例如 .css 文件),这是 webpack 特有的功能,其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是有很必要的,因为这可以使开发人员创建出更准确的依赖关系图。

在更高层面,在 webpack 的配置中 loader 有两个目标:

  1. test 属性,用于标识出应该被对应的 loader 进行转换的某个或某些文件。

  2. use 属性,表示进行转换时,应该使用哪个 loader。

栗子

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

module.exports = config;

Last updated