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() ] };
看起来,查询是自定义单个加载程序的行为的另一种方式,比内联指定这些参数要干净(见下文)。 如果存在多个加载器,Webpack不知道query
configuration适用于哪个。
以下应解决您的问题:
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,在更新的版本中工作的其他答案。
我的解决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/ }
在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-loader
configuration中预设的es2015-native-modules
。 这与options
的说明没有任何关系,只是包含es6模块允许您使用v2中引入的webpack树形图function。 它可以一个人留下,它仍然可以工作,但是如果没有明确的升级,答案会是不完整的:-)
免责声明:这和我对类似问题的回答是一样的 ,但是这个问题有类似的投票/意见/谷歌排名,所以我也会在这里发表答案。
对于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'] } } ] } };
这个解决scheme为我工作:
module: { loaders:[ { test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader' } ] }
并预置在.babelrc中
{ 'presets': ['latest', 'react', 'stage-0'] }