Question

我有这个正在运行的Babel加载器

{ test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ },

但是现在我想要一个CoffeeScript加载器但是我想通过Babel来管它以获得花哨的HMR东西

{ test: /\.coffee$/, loader: 'babel!coffee', query: babelSettings, exclude: /node_modules/ },

但这并不起作用，并导致以下错误。

错误：无法定义＆＃39;查询＆＃39;加载器列表中的多个加载器

任何想法如何仅为加载器链的Babel部分定义查询？查询是一个复杂的对象，我不认为我可以对其进行编码。

var babelSettings = { stage: 0 };

if (process.env.NODE_ENV !== 'production') {
  babelSettings.plugins = ['react-transform'];
  babelSettings.extra = {
    'react-transform': {
      transforms: [{
        transform: 'react-transform-hmr',
        imports: ['react'],
        locals: ['module']
      }, {
        transform: 'react-transform-catch-errors',
        imports: ['react', 'redbox-react']
      }]
      // redbox-react is breaking the line numbers :-(
      // you might want to disable it
    }
  };
}

Answer 1

执行此操作的方法是在加载器字符串本身中设置查询参数，因为query对象键仅适用于一个加载器。

假设您的设置对象可以序列化为JSON，如您的示例所示，您可以轻松地将设置对象作为JSON查询传递。然后只有Babel加载器才能获得设置。

{ test: /\.coffee$/, loader: 'babel?'+JSON.stringify(babelSettings)+'!coffee', exclude: /node_modules/ }

这样做的功能在这里有所记录：

<强> Using Loaders: Query parameters

大多数加载器接受普通查询格式（?key=value&key2=value2）和JSON对象（?{"key":"value","key2":"value2"}）的参数。

Answer 2

Webpack的创建者Sokra对如何做到这一点给出了自己的看法here，但是你可能会更好地服务于webpack-combine-loaders帮助者更加相似用于使用查询对象定义单个加载器的样式。

使用import java.util.Random; public class R { public static void main(String[] args) { // create random object - reuse this as often as possible Random random = new Random(); // create a big random number - maximum is ffffff (hex) = 16777215 (dez) int nextInt = random.nextInt(0xffffff + 1); // format it as hexadecimal string (with hashtag and leading zeros) String colorCode = String.format("#%06x", nextInt); // print it System.out.println(colorCode); } }，您可以定义多个加载器：

webpack-combine-loaders

Answer 3

在 webpack 2＆amp; 3 这可以更加干净地配置。

可以在加载器对象数组中传递加载器。每个loader对象都可以指定一个options对象，其作用类似于特定加载器的webpack 1 query。

例如，使用react-hot-loader和babel-loader，babel-loader配置了一些选项， webpack 2＆amp; 3

module: { rules: [{ test: /\.js$/, exclude: /node_modules/, use: [{ loader: 'react-hot-loader' }, { loader: 'babel-loader', options: { babelrc: false, presets: [ 'es2015-native-modules', 'stage-0', 'react' ] } }] }] }

为了进行比较，使用查询字符串方法， webpack 1 中的配置相同。

module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loaders: [ 'react-hot', 'babel-loader?' + 'babelrc=false,' + 'presets[]=es2015,' + 'presets[]=stage-0,' + 'presets[]=react' ] }] }

注意链中所有已更改的属性名称。

另请注意，我已将es2015预设更改为es2015-native-modules配置中预设的babel-loader。这与options的规范无关，只是包括es6模块允许您使用v2中引入的树抖动功能。它可以单独使用它仍然可以工作，但如果没有指出明显的升级，答案会感觉不完整： - ）

Answer 4

test属性只是正则表达式，因此您可以同时检查jsx和coffee： test: /\.(jsx|coffee)$/

Sass / SCSS更容易一些： test: /\.s[ac]ss$/

如何向具有多个加载器的webpack加载器添加查询？

4 个答案: