问题描述
我有这个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:
import:['react'],
import:['react',
, redbox-react']
}]
// redbox-react打破行号:-(
//你可能想禁用它
}
} ;
}
是在加载器字符串本身中设置查询参数,因为查询
对象键将只适用于一个加载器。
假设你的设置对象可以序列化为JSON,如你的例子所示,你可以很容易地作为JSON查询传递你的设置对象,然后只有Babel加载器将获得设置。
{test:/\.coffee$/,loader:'babel?'+ JSON.stringify(babelSettings)+'!coffee',exclude:/ node_modules /}
这样做的功能在这里有些记录:
Any idea how to define the query just for the Babel part of the loader chain? The query is a complicated object and I don't think I can encode it.
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
}
};
}
The way to do this is to set the query parameters in the loader string itself, as the query
object key will only work for one loader.
Assuming your settings object can be serialized to JSON, as your example indicates, you could easily pass your settings object as a JSON query. Then only the Babel loader will get the settings.
{ test: /\.coffee$/, loader: 'babel?'+JSON.stringify(babelSettings)+'!coffee', exclude: /node_modules/ }
The feature for doing this is somewhat documented here:
这篇关于如何向具有多个加载器的webpack加载器添加查询?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!