Webpack - 错误:无法在加载器列表中定义“查询”和多个加载器
Webpack - Error: Cannot define 'query' and multiple loaders in loaders list
在本教程之后,我在数组中添加了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()
]
};
查询似乎是自定义单个加载器行为的另一种方法,比内联指定这些参数更干净(见下文(。如果存在多个加载器,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,但请参阅适用于较新版本的更清洁解决方案的其他答案。
我的解决方案:
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/
}
在 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 摇树功能。它可以单独保留,它仍然可以工作,但是如果没有指出明显的升级,答案会感觉不完整:-(
免责声明:这与我对类似问题的回答相同,但这个问题的投票/视图/谷歌排名相似,所以我也会在这里发布答案。
对于 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']
}
}
]
}
};
这个解决方案对我有用:
module: {
loaders:[
{
test: /'.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
}
]
}
和 .babelrc 中的预设
{
'presets': ['latest', 'react', 'stage-0']
}
请参考 https://webpack.github.io/docs/usage.html
自从我为自己找到解决方案以来,我遇到了同样的问题。 你可以试试:
---这是解决方案---
如果您在".babelrc"文件中定义了"预设"那么你不需要在"webpack.config.js"文件中指定它,然后删除它,它工作得很好
如果你不这样做,我建议您转到".babelrc"文件并在那里指定您的预设
- 加载dom后禁用媒体查询
- 如何在不重新加载URL的情况下查询Node.Js的后端并更新页面
- j查询选项卡未加载
- 问题 - 在查询加载器 2 加载页面之前显示 1 秒的页面
- React 路由器和任意查询参数:页面在加载时无意中刷新
- j查询如何在加载了 load() 函数的页面上进行 POST/AJAX,而无需刷新页面
- 通过位置栏更改查询字符串,AJAX加载的菜单不会't在没有硬刷新的情况下重新填充
- 如何防止用查询加载的css应用于整个页面
- 如何使用html5中的javascript在页面加载时从查询字符串中获取值
- 具有动态查询的Webpack加载器
- 在页面加载时获取查询字符串值失败
- 通过将$resource查询数组添加到AngularJS中另一个数组的底部来进行分页加载
- 使j查询ajax调用既适用于页面加载,也适用于单击按钮
- 如何在没有查询字符串和参数的情况下加载jQuery
- 基于媒体查询的Rails部分加载
- j查询延迟布局的重新加载
- 如何使用 AngularJS 在页面加载时通过查询字符串值来设置单选按钮值
- j查询重新加载函数
- 如果元素显示:无;在媒体查询中,它们是否仍然加载
- parse.com 加载代码 HTTP 请求和查询