Webpack - 多次包含文件 [英] Webpack - Include file multiple times

问题描述

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

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

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

With the above in my webpack config

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

结果

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

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

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

推荐答案

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 配置.

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.

这篇关于Webpack - 多次包含文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！