Webpack - 错误：无法在加载器列表中定义“查询”和多个加载器
Posted
技术标签:
【中文标题】Webpack - 错误：无法在加载器列表中定义“查询”和多个加载器【英文标题】：Webpack - Error: Cannot define 'query' and multiple loaders in loaders list 【发布时间】：2016-05-17 22:36:48 【问题描述】：在我按照本教程在数组中添加 react-hot 加载程序后出现此错误：https://thoughtbot.com/blog/setting-up-webpack-for-react-and-hot-module-replacement
我收到Error: Cannot define 'query' and multiple loaders in loaders list。
var WebpackDevServer = require("webpack-dev-server");
var webpack = require('webpack');
var path = require('path');
require("babel-polyfill");
var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'src');
module.exports =
entry: [
'babel-polyfill',
'bootstrap-loader',
'webpack/hot/dev-server',
APP_DIR + '/import.js',
],
output:
path: BUILD_DIR,
filename: 'bundle.js'
,
module:
loaders: [
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
exclude: /node_modules/,
query:
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
,
test: /\.css$/,
loader: "style-loader!css-loader"
,
test: /\.scss$/,
loaders: ["style", "css", "sass"]
,
test: /\.(png|woff|woff2|eot|ttf|svg|jpg|gif)$/,
loader: 'url-loader?limit=100000'
]
,
plugins: [
new webpack.ProvidePlugin(
$: "jquery",
jQuery: "jquery"
),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
;
【问题讨论】：
How to add a query to a webpack loader with multiple loaders?的可能重复 【参考方案1】：查询似乎是自定义 single 加载器行为的另一种方法，它比内联指定这些参数更干净（见下文）。如果存在多个 loader，Webpack 不知道 query 配置适用于哪个。
以下应该可以解决您的问题：
module:
loaders: [
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime']
编辑：虽然此解决方案适用于 Webpack 1，但请参阅其他答案以了解适用于较新版本的更简洁的解决方案。
【讨论】：
感谢您发布此解决方案 复杂查询请使用webpack-combine-loaders。【参考方案2】：
我的解决方案：
loaders: [
test: /\.(js|jsx)$/,
loaders: ['react-hot', 'babel?' + JSON.stringify(
cacheDirectory: true,
plugins: [
'transform-runtime',
'transform-decorators-legacy'
],
presets: ['es2015', 'react', 'stage-0'],
env:
production:
presets: ['react-optimize']
), 'eslint'],
include: src,
exclude: /node_modules/
【讨论】：
我喜欢 JSON.stringify 的想法 :)【参考方案3】：在 webpack 2 & 3 中，这可以更简洁地配置。
加载器可以在加载器对象数组中传递。每个加载器对象都可以指定一个 options 对象，该对象的作用类似于该特定加载器的 webpack 1 query。
例如，在 webpack 2/3
中同时使用react-hot-loader 和babel-loader，并使用一些选项配置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 中的相同配置，使用查询字符串方法。
module:
rules: [
test: /\.js$/,
exclude: /node_modules/,
loaders: [
'react-hot',
'babel-loader?' +
'babelrc=false,' +
'presets[]=es2015,' +
'presets[]=stage-0,' +
'presets[]=react'
]
]
请注意整个链条中更改的属性名称。
另外，请注意我在babel-loader 配置中将es2015 预设更改为es2015-native-modules 预设。这与options的规范无关，只是包含es6模块允许您使用v2中引入的webpack tree-shaking功能。它可以单独放置，它仍然可以工作，但是如果没有指出明显的升级，答案会感觉不完整:-)
免责声明：这与我对similar question 的回答相同，但这个问题的投票/观看次数/谷歌排名相似，所以我也会在这里发布答案。
【讨论】：
【参考方案4】：对于 webpack 2。我设法这样配置：
var webpack = require("webpack");
var path = require("path");
module.exports =
entry: "./src/index.js",
output:
path: path.resolve(__dirname, "dist/assets"),
filename: "bundle.js",
publicPath: "/assets/"
,
devServer:
inline: true,
contentBase: './dist',
port: 3000
,
module:
loaders: [
test: /\.js$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options:
presets: ['latest', 'react', 'stage-0']
]
;
【讨论】：
【参考方案5】：这个解决方案对我有用：
module:
loaders:[
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
]
和.babelrc中的预设
'presets': ['latest', 'react', 'stage-0']
请参考https://webpack.github.io/docs/usage.html
【讨论】：
【参考方案6】：自从我为自己找到解决方案后，我也遇到了同样的问题。你可以试试：
--- 这里是解决方案---
如果你在“.babelrc”文件中定义了“presets” 那么就不用在“webpack.config.js”文件中指定了，然后删除就行了
如果你不这样做， 我建议你去你的“.babelrc”文件并在那里指定你的预设
【讨论】：
以上是关于Webpack - 错误：无法在加载器列表中定义“查询”和多个加载器的主要内容，如果未能解决你的问题，请参考以下文章
Sass 加载器无法使用 Encore webpack 和 Symfony 5 加载 url