如何使用多个加载程序向Webpack加载程序添加查询?

JavaScript Webpack

Stafan樱

2020-03-23

我有正在工作的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
    }
  };
}

第3118篇《如何使用多个加载程序向Webpack加载程序添加查询?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
乐米亚 2020.03.23

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android