nuxt.js - 在 Nuxt 中使用自定义 webpack 加载器

Question

我正在使用 Nuxt.js，我想告诉 Webpackraw-loader为特定的文件扩展名 ( ) 使用特定的加载器 ( .pug)。根据文档，我应该使用添加自定义 webpack 规则build.extend，即：

build: {
  // Extend webpack config
  extend(config) {
    config.module.rules.push({
      test: /\.pug$/,
      use: "raw-loader",
    })
  },
}

但是，如果文件格式已经被内置规则匹配（如 .pug 的情况），这将不起作用。我的规则将被内置规则覆盖。

替换特定webpack 规则的推荐方法是什么？我目前笨拙地遍历所有现有规则以覆盖那些干扰我的规则的规则，如下所示：

build: {
  // Extend webpack config
  extend(config) {
      config.module.rules = config.module.rules
        .map(x => {
          if (x.test.source.includes(".pug")) {
            return {
              test: /\.pug$/,
              use: "raw-loader",
            }
          } else {
            return x
          }
        })
  },
}

标签： nuxt.jswebpack-loader