Javascript 网页包-多次包含文件

我想通过两个不同的加载程序包含一个文件两次。原因是我希望在ES6中显示代码片段，同时允许它们在不支持语法的浏览器中运行

实际上，我想要实现的是以下内容，但输出中包含了两个加载程序的结果-

{
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    loader: "babel-loader"
},
{
    test: /\.(js|jsx)$/,
    include: /app\/examples/,
    use: [
      {
        loader: "file-loader",
        options: {
          regExp: /app\/examples\/([^\/]+)\/([^\.]+)+\.jsx?$/,
          name: 'examples/[1]/[2].example',
        }
      }
    ]
  }

在我的网页配置中使用以上内容

import example from '../../examples/simple/ex1'

导致

Module {default: "examples/simple/ex1.example", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

而不是像我希望的那样通过babel运行代码

const multi = require('multi-loader');
const combineLoaders = require('webpack-combine-loaders');

module: {
  loaders: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      include: /app\/examples/,
      loader: multi(combineLoaders([
        { loader: 'file-loader' },
        { loader: 'babel-loader' },
      ]))
    },
  ]
}

---

这应该能奏效。您还必须使用CombineLoader，因为您必须使用对象选项。在联合收割机装载机阵列中，您还可以传递装载机配置。

我最终无法用装载机处理此问题-尽管进一步阅读后，我认为这不是正确的方法。相反，我现在使用复制网页插件来复制文件-

plugins: [
  new CopyWebpackPlugin([ {
    from: path.join(rootDir, 'app', 'examples'),
    to: path.join(outputDir, 'examples')
  }])
],
module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }
  ]
}

---

您可以在webpack中使用multiloader。更多信息-@MohitTilwani-我正在查看。你能解释一下如何将上面的配置映射到它吗这些示例似乎都使用了旧的module.loaders语法，因此我不确定如何将选项传递给file-loader。因此我尝试了类似的方法。问题是文件加载器的文件仍然通过babel运行。@Hector我只是通过更改顺序编辑了答案。请你试一试好吗。所以现在babel loader将首先执行，然后是仍然不工作的文件loader。我最终使用了复制网页包插件来解决这个问题，我实际上认为它更干净。

multi-loader

已被弃用，不确定还有什么替代方案