我试图让我的webpack环境将jsx / es6语法编译回常规的es5 javascript。当我运行"开始"然而,它给我一个指向ReactDom.render方法的语法错误。
我一直在四处寻找,我认为我的网站设置错误。
webpack.config.js
module.exports = {
entry: [
'./src/index.js'
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
的package.json
{
"name": "react-boilerplate",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"bable": {
"presets": [
"env",
"react",
"stage-2"
]
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
},
"dependencies": {
"express": "^4.16.3",
"react": "^16.3.1",
"react-dom": "^16.3.1"
},
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development"
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
答案 0 :(得分:0)
尝试在加载器选项语句中使用babel预设react
和es2015
,如下所示:
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'es2015']
}
}
}