我使用Webpack和NodeJS将react-router v4添加到我的项目中。应用程序正确编译，日志中没有任何错误消息，但浏览器控制台给了我这个：
webpack.config.js我认为问题出在Webpack配置中。这是我的var path = require('path')
var webpack = require('webpack')
var NpmInstallPlugin = require('npm-install-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'babel-polyfill',
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new NpmInstallPlugin()
],
module: {
preLoaders: [
{
test: /\.js$/,
loaders: ['eslint'],
include: [
path.resolve(__dirname, "src"),
],
}
],
loaders: [
{
loaders: ['react-hot', 'babel-loader'],
include: [
path.resolve(__dirname, "src"),
],
test: /\.js$/,
plugins: ['transform-runtime'],
presets: ['es2015','react']
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [autoprefixer, precss];
}
}
：
package.json这是我的{
"name": "redux-ru-tutorial",
"version": "1.0.0",
"description": "Redux RU tutorial",
"main": "index.js",
"scripts": {
"start": "node server.js"
},
"author": "Yuriy Shipovalov",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.3.1",
"babel-core": "^6.4.5",
"babel-eslint": "^4.1.6",
"babel-loader": "^6.2.1",
"babel-plugin-transform-runtime": "^6.4.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.23.1",
"eslint": "^1.10.3",
"eslint-loader": "^1.2.1",
"eslint-plugin-react": "^3.16.1",
"express": "^4.13.4",
"npm-install-webpack-plugin": "^2.0.2",
"postcss-loader": "^0.8.0",
"precss": "^1.4.0",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.12",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.6.4"
},
"dependencies": {
"babel-polyfill": "^6.3.14",
"babel-runtime": "^6.3.19",
"cors": "^2.8.3",
"history": "^4.6.1",
"jquery": "^3.2.1",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-redux": "^4.0.6",
"react-redux-router": "0.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.3.1",
"redux-logger": "2.5.2",
"redux-thunk": "1.0.3"
}
}
文件：
index.js这是我的import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import App from './containers/App'
import './styles/app.css'
import configureStore from './store/configureStore'
const store = configureStore()
console.log(store.getState())
render(
<Provider store={store}>
<Router>
<Route> path="/" component={App}></Route>
</Router>
</Provider>,
document.getElementById('root')
)
文件：
{{1}}
答案 0 :(得分：1)
您正在尝试将Babel的插件和预设直接在Webpack配置中设置为module.loaders的一部分。这是不正确的。您必须将其作为选项传递给 loader 。该错误是因为您错误地传递了选项，因此Babel没有收到选项，因此不会根据预设和错误来转换代码。
根据您的Webpack版本，尝试：
Webpack 1.x
由于您有多个加载器，无法在query对象中进行设置。相反，您将必须设置加载程序选项内嵌：
{
test: /\.js$/,
loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react?plugins[]=transform-runtime']
}
这将通过查询直接将加载程序选项传递给Babel，但由于您有两个加载器，因此Webpack不知道要查询哪个加载程序，因此您必须在一个加载器上内联它。
答案 1 :(得分：-1)
以下是webpack documentation的示例：
module.rules允许您在webpack配置中指定多个加载器。这是显示加载器的简洁方法，有助于维护干净的代码。它还为您提供每个相应装载机的完整概述。
在您的情况下，您可以：
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
'react-hot','babel-loader'
]
}
]
}
希望这有帮助。