我正在尝试开始并学习与webpack的反应并最终在那里抛出redux(很难找到指导一起学习这三个......)无论如何,设置有问题。任何帮助表示赞赏。谢谢!
编辑:@FakeRainBrigand的解决方案
我的错误是
webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./src'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
modules: ['node_modules', 'src'],
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['react-hot-loader', 'babel-loader']
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
};
index.jsx
import React from 'react';
import { render } from 'react-dom';
import App from './components/app';
render(<App/>, document.getElementById('app'));
app.jsx
import React from 'react';
export default class App extends React.Component {
render() {
return (
<div>
<h1>My Blog</h1>
</div>
)
}
}
的package.json
{
"name": "blog",
"version": "1.0.0",
"main": "index.jsx",
"license": "MIT",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"react-hot-loader": "^1.3.1",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
}
}
我是新手的反应和webpack所以也许这比我想象的要简单得多。非常感谢任何帮助。
答案 0 :(得分:1)
您好像错过了.babelrc
文件。您可以generate one here,或者只使用这个并安装依赖项。
{
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
],
"presets": [
[
"env",
{
"targets": {
"browsers": [
"> 1%"
]
}
}
],
"react"
]
}
安装
npm install --save-dev babel-preset-env babel-preset-react babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread