Webpack – 错误：无法在加载器列表中定义“查询”和多个加载器

我在数组中添加'react-hot'加载器后出现错误。 我已经按照这个教程︰https: //robots.thoughtbot.com/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() ] }; 

Answer 1

看起来，查询是自定义单个加载程序的行为的另一种方式，比内联指定这些参数要干净（见下文）。 如果存在多个加载器，Webpack不知道queryconfiguration适用于哪个。

以下应解决您的问题：

 module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime'] } 

---

编辑：虽然这个解决scheme适用于Webpack 1，请参阅更清晰的解决scheme，在更新的版本中工作的其他答案。

Answer 2

我的解决scheme

 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/ } 

Answer 3

在webpack 2＆3中，可以更加干净地configuration。

可以将加载器传入一系列加载器对象中。 每个加载器对象都可以指定一个options对象，该对象的作用与特定加载器的webpack 1 query相似。

例如，使用react-hot-loader和babel-loader ，以及configuration了一些选项的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' ] } }] }] } 

为了比较，这里是在webpack 1中使用查询string方法的相同configuration。

 module: { rules: [{ 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中引入的webpack树形图function。 它可以一个人留下，它仍然可以工作，但是如果没有明确的升级，答案会是不完整的:-)

---

免责声明：这和我对类似问题的回答是一样的 ，但是这个问题有类似的投票/意见/谷歌排名，所以我也会在这里发表答案。

---

Answer 4

对于webpack 2 。 我设法像这样configuration：

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'] } } ] } };
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'] } } ] } }; 

Answer 5

这个解决scheme为我工作：

 module: { loaders:[ { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader' } ] } 

并预置在.babelrc中

 { 'presets': ['latest', 'react', 'stage-0'] } 

请参阅https://webpack.github.io/docs/usage.html