Webpack - Include file multiple times

Question

I want to include a file twice through two different loaders. The reasoning is I want to display code snippets in ES6 while allowing them to be run in browsers not supporting the syntax.

Effectively what I would like to achieve is the below but with both loaders results being included in the output -

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

With the above in my webpack config

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

results in

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

Rather than the code run through babel as I would have hoped for.

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

This should do the trick. you have to also use combineLoaders as you have to use options object. inside combine loaders array you can pass loader configuration also.

Answer 2

I couldn't manage to handle this with loaders in the end - although with further reading I don't believe this was the correct approach anyway. Instead i'm now using copy-webpack-plugin to copy the files -

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