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

Question

我有这个Babel装载机正在工作

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

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

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

但这不起作用,并导致以下错误.

错误:无法在加载器列表中定义"查询"和多个加载器

知道如何仅为加载器链的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/ }

执行此操作的功能在此处有所记录:

使用加载器:查询参数

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

Answer 2

Webpack的创建者Sokra在这里给出了如何做到这一点的自己的看法,但是你可能会更好地使用webpack-combine-loaders帮助器,它在风格上与使用查询对象定义单个加载器更相似.

使用webpack-combine-loaders,您可以定义多个加载器:

combineLoaders([
  {
    loader: 'css-loader',
    query: {
      modules: true,
      sourceMap: true,
      localIdentName: '[name]__[local]--[hash:base64:5]',
    },
  },
  {
    loader: 'sass-loader',
    query: {
      sourceMap: true,
      includePaths: [
        'app/assets/stylesheets',
        'app/assets/stylesheets/legacy',
      ],
    },
  },
]);

Answer 3

在webpack 2和3中,这可以更加干净地配置.

加载器可以在一组加载器对象中传递.每个加载器对象可以指定一个options对象,该对象的行为类似于该query特定加载器的webpack 1 .

例如,同时使用react-hot-loader和babel-loader,与babel-loader配置有一些选项,在的WebPack 2&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中引入的树抖动功能.它可以保持独立,它仍然可以工作,但如果没有指出明显的升级,答案会感觉不完整:-)