如何使用多个加载器将查询添加到webpack加载器？
我有这个巴贝尔装载机正在工作
{ test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ }, 但现在我想要一个CoffeeScript加载程序，但是我想通过Babelpipe道来获取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 } }; }
执行此操作的方法是在加载器string本身中设置查询参数，因为query对象键仅适用于一个加载器。
假设您的设置对象可以被序列化为JSON，如您的示例所示，您可以轻松地将您的设置对象作为JSON查询来传递。 那么只有Babel加载程序才能得到设置。
{ test: /\.coffee$/, loader: 'babel?'+JSON.stringify(babelSettings)+'!coffee', exclude: /node_modules/ }
这样做的function在这里有一些logging：
使用加载器：查询参数
大多数加载器以普通查询格式（
?key=value&key2=value2）和JSON对象（?{"key":"value","key2":"value2"}）接受参数。
Webpack的创build者Sokra在这里给出了他自己如何做到这一点 ，但是你可能会更好地使用webpack-combine-loaders帮助器，它的风格更类似于用查询对象定义一个单一的加载器。
使用webpack-combine-loaders ，你可以定义多个loader：
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', ], }, }, ]);
在webpack 2＆3中，可以更加干净地configuration。
可以将加载器传入一系列加载器对象中。 每个加载器对象都可以指定一个options对象，该对象的作用与特定加载器的webpack 1 query相似。
例如，在webpack 2＆3中使用react-hot-loader和babel-loader ，以及configuration了一些选项的babel-loader
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中使用查询string方法的相同configuration。
module: { loaders: [{ test: /\.js$/, exclude: /node_modules/, loaders: [ 'react-hot', 'babel-loader?' + 'babelrc=false,' + 'presets[]=es2015,' + 'presets[]=stage-0,' + 'presets[]=react' ] }] }
注意改变的属性名称在链中。
另外请注意，我将es2015预设更改为babel-loaderconfiguration中预设的es2015-native-modules 。 这与options的规范没有任何关系，只是包含es6模块允许您使用v2中引入的树状特征。 它可以一个人留下，它仍然可以工作，但是如果没有明确的升级，答案会是不完整的:-)
test属性只是正则expression式，所以你可以同时运行一个检查两个jsx和咖啡： test: /\.(jsx|coffee)$/
Sass / SCSS稍微简单一点： test: /\.s[ac]ss$/
