webpack + react + es6, 并附上自己碰到的一些问题
最近一直在学react,react的基础部分已经学得差不多了，然而自己并没有做详细的记录，有兴趣的同志可以参考阮一峰老师的教程，个人觉得挺不错的，链接如下：https://github.com/ruanyf/react-babel-webpack-boilerplate,
学完了基础就想倒腾倒腾，webpack整合react加es6。
1.webpack + react + es6
1.1 新建项目
项目目录如下
具体的内容就不解释了，大家应该都看得懂
1.2 配置webpack
配置文件如下
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname + "/",
entry: ["./src/js/test.js"],
output: {
path: path.join(__dirname, './src/build'),
filename: "main.js"
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}, {
test: /\.scss$/,
loader: 'style!css!sass',
}]
},
// plugins: [
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// })
// ]
};
module中功能包括jsx转js，es6装es5，scss转css，
这里使用到了 webpack 的一个内置插件 UglifyJsPlugin，通过他可以对生成的文件进行压缩，这里我注释掉了
1.3 上代码
接下来把重要的代码给大家
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"></div> <script src="./build/main.js"></script> </body> </html>
foot.js
import React from 'react';
export default class Foot extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h1>Hello World</h1>;
}
}
test.js
import React from 'react'; import ReactDOM from 'react-dom'; import Foot from './foot.js'; require('./../css/base.scss'); ReactDOM.render( <Foot />, document.getElementById("app") );
这是最简单的webpack加react，test.js为入口文件
2.常见问题
问题1 Uncaught TypeError: Super expression must either be null or a function, not undefined
如果碰到这个问题不要去百度了，先狠狠的打自己一顿起，因为你是单词写错了，出现这个问题百分之99.99是因为单词写错了，反正我是把Component写成了Compontent
问题2 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
出现这个问题，我也搞了很久，最后把 import { Foot } from './foot.js' 改成了 import Foot from './foot.js' 就解决了，使用export default时，对应的import语句不需要使用大括号，不使用export default时，对应的import语句需要使用大括号。
最后: 我只是一个萌萌的前端，有问题一起思考，大家共同进步
