Webpack - 多次包含文件

Question

我想通過兩個不同的加載程序兩次包含一個文件。 原因是我想在 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',
        }
      }
    ]
  }

在我的 webpack 配置中使用上述內容

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

結果是

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

而不是像我希望的那樣通過 babel 運行代碼。

Answer 1

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' },
      ]))
    },
  ]
}

這應該可以解決問題。 您還必須使用 combineLoaders ，因為您必須使用選項對象。 在 combine loaders 數組中，您也可以傳遞 loader 配置。

Answer 2

我最終無法用裝載機處理這個問題——盡管通過進一步閱讀，我認為這無論如何都不是正確的方法。 相反，我現在使用 copy-webpack-plugin 來復制文件 -

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"
    }
  ]
}