Javascript 如何向具有多个加载器的 webpack 加载器添加查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33117136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a query to a webpack loader with multiple loaders?
提问by Chet
I have this Babel loader that's working
我有这个正在工作的 Babel loader
{ test: /\.jsx?$/, loader: 'babel', query: babelSettings, exclude: /node_modules/ },
But now I want a CoffeeScript loader but I want to pipe it through Babel to get the the fancy HMR stuff
但是现在我想要一个 CoffeeScript 加载器，但我想通过 Babel 将它通过管道传输以获得花哨的 HMR 内容
{ test: /\.coffee$/, loader: 'babel!coffee', query: babelSettings, exclude: /node_modules/ },
This doesn't work though, and results in the following error.
但这不起作用，并导致以下错误。
Error: Cannot define 'query' and multiple loaders in loaders list
错误：无法在加载器列表中定义“查询”和多个加载器
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.
知道如何为加载器链的 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
}
};
}
回答by Alexander O'Mara
Update:With non-legacy versions of Webpack you can define an array of loaders in the Webpack configuration.
更新：使用非遗留版本的 Webpack，您可以在 Webpack 配置中定义加载器数组。
If you need to use an older versions of Webpack or add the options inline, the original answer is below.
如果您需要使用旧版本的 Webpack 或内联添加选项，原始答案如下。
The way to do this is to set the query parameters in the loader string itself, as the queryobject key will only work for one loader.
这样做的方法是在加载器字符串本身中设置查询参数，因为query对象键仅适用于一个加载器。
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.
假设您的设置对象可以序列化为 JSON，如您的示例所示，您可以轻松地将设置对象作为 JSON 查询传递。那么只有 Babel loader 会得到这些设置。
{ test: /\.coffee$/, loader: 'babel?'+JSON.stringify(babelSettings)+'!coffee', exclude: /node_modules/ }
The feature for doing this is somewhat documented here:
执行此操作的功能在此处有所记录：
Using Loaders: Query parameters
Most loaders accept parameters in the normal query format (
?key=value&key2=value2) and as JSON object (?{"key":"value","key2":"value2"}).
大多数加载器接受普通查询格式 (
?key=value&key2=value2) 和 JSON 对象 (?{"key":"value","key2":"value2"}) 的参数。
回答by Brett Sun
Sokra, the creator of Webpack, gives his own take on how to do this here, but you'll probably be better served with the webpack-combine-loadershelper that's more similar in style to defining a single loader with the query object.
Webpack 的创建者 Sokra 在这里给出了他自己对如何执行此操作的看法，但您可能会更好地使用webpack-combine-loaders助手，它在风格上更类似于使用查询对象定义单个加载器。
With webpack-combine-loaders, you can define multiple loaders as such:
使用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',
],
},
},
]);
回答by davnicwil
In webpack 2 & 3this can be configured much more cleanly.
在webpack 2 和 3 中，这可以更干净地配置。
Loaders can be passed in an array of loader objects. Each loader object can specify an optionsobject that acts like the webpack 1 queryfor that particular loader.
加载器可以在加载器对象数组中传递。每个 loader 对象都可以指定一个options对象，该对象的作用类似于该query特定 loader的 webpack 1 。
For example, using both react-hot-loaderand babel-loader, with babel-loaderconfigured with some options, in webpack 2 & 3
例如，同时使用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'
]
}
}]
}]
}
For comparison, here is the same configuration in webpack 1, using the query string method.
为了比较，这里是webpack 1 中相同的配置，使用查询字符串方法。
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: [
'react-hot',
'babel-loader?' +
'babelrc=false,' +
'presets[]=es2015,' +
'presets[]=stage-0,' +
'presets[]=react'
]
}]
}
Notice the changed property names all down the chain.
请注意整个链中已更改的属性名称。
Also, note that I changed the es2015preset to es2015-native-modulespreset in the babel-loaderconfiguration. This has nothing to do with the specification of options, it's just that including es6 modules allows you to use the tree-shaking feature introduced in v2. It could be left alone and it would still work, but the answer would feel incomplete without that obvious upgrade being pointed out :-)
另请注意，我在配置中将es2015预设更改为预设。这与 的规范无关，只是包含 es6 模块允许您使用 v2 中引入的 tree-shaking 功能。它可以单独存在，它仍然可以工作，但是如果没有指出明显的升级，答案会感觉不完整:-)es2015-native-modulesbabel-loaderoptions
回答by Brandon Aaskov
The testproperty is just regex, so you can run a check for both jsx and coffee at the same time:
test: /\.(jsx|coffee)$/
该test属性只是正则表达式，因此您可以同时检查 jsx 和 coffee：
test: /\.(jsx|coffee)$/
Sass/SCSS is a little easier:
test: /\.s[ac]ss$/
Sass/SCSS 稍微简单一点：
test: /\.s[ac]ss$/
