react- hot在按照本教程的说明将加载器添加到数组中后,出现了此错误:https : //thoughtbot.com/blog/setting-up-webpack-for-react-and-hot-module- replacement
react- hot
我正在Error: Cannot define 'query' and multiple loaders in loaders list。
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配置适用于哪个加载程序。
query
以下应该可以解决您的问题:
module: { loaders: [{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=stage-0,presets[]=react,plugins[]=transform-runtime'] }
编辑: 虽然此解决方案适用于Webpack 1,但请参见其他答案以获取在较新版本中工作的更清洁的解决方案。