最近一直在学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语句需要使用大括号。

最后: 我只是一个萌萌的前端，有问题一起思考，大家共同进步

webpack + react + es6, 并附上自己碰到的一些问题的更多相关文章

  1. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  2. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  3. Webpack+React+ES6入门指南[转]

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  4. Webpack+React+ES6 最新环境搭建和配置（2017年）

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  5. webpack学习（六）—webpack+react+es6（第3篇）

    接上篇 : webpack学习(六)—webpack+react+es6(第2篇) 上篇其实是有问题的,问题在取服务器数据这块.this.props 表示那些一旦定义,就不再改变的特性,而 this. ...

  6. webpack学习（六）—webpack+react+es6（第2篇）

    接上篇        webpack学习(五)—webpack+react+es6(第1篇) 本文做个简单的图片加文字的页面.其中,配置文件跟上篇一致.项目结构: index.html <!DO ...

  7. webpack学习（五）—webpack+react+es6（第1篇）

    如果你看过webpack学习系列的前一个文章,接下来做的东西会比较简单 :webpack学习(四)— webpack-dev-server react发展的很快,现在大部分开发react相关的项目,都 ...

  8. webpack React+ES6

    webpack踩坑之路——构建基本的React+ES6项目   webpack是最近比较火的构建工具,搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的 ...

  9. 一分钟搭建Webpack+react+es6框架

    最近react刷屏的厉害,而随着它一起走进我们视野的还有webpack,webpack只是个工具,为什么如此火呢?因为简单好了不废话.   直接进入正题: 打开命令行工具: npm install - ...

随机推荐

  1. Windows Phone 十二、设计器同步

    在设计阶段为页面添加数据源 Blend或者VS的可视化设计器会跑我们的代码,然后来显示出来,当我们Build之后,设计器会进入页面的构造函数,调用InitializeComponent();方法来将U ...

  2. iOS 开发：利用第三方插件来安装CoCoapods

    引言:通过上一篇博客我们知道了怎么样去通过终端来安装CoCoapods,这一篇我们着重与用第三方插件来安装CoCoapods: 1. 首先在提下链接下载插件 https://github.com/ka ...

  3. 4. 什么是AJAX

    术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验.在Ajax之前,Web站点强制用户进入提交/等待/重新显示范例,用户的动作总是与服务器的“思考时间”同步.Ajax提供与服务器 ...

  4. rdesktop的使用

    整个地球都知道rdesktop,有了它,我们可以从Solaris或者Linux使用Windows,当然Windows要开启Windows Terminal Service.虽然也有基于GTK+的tsc ...

  5. Centos Samba 服务器 iptables 和 SElinux 设置

    1.安装samba服务器 # yum install samba 2.配置 # vi /etc/samba/smb.conf security = user (100行左右) 在Share Defin ...

  6. C语言回顾-整型变量修饰符和一维数组

    1.整型变量修饰符 1)改变整型变量的存储空间 #include <stdio.h> int main(int argc, const char * argv[]) { //改变整型变量占 ...

  7. Xubuntu VNC Xfce4

    sudo mousepad ~/.vnc/xstartup #!/bin/sh # Uncomment the following two lines for normal desktop: unse ...

  8. WebSphere MQ 安装

    WebSphereMQ可以在IBM官网下载,有试用版90天的.下载地址http://www.ibm.com/developerworks/cn/downloads/ws/wmq/index.html ...

  9. Clouda聊天室实践

    1.Clouda说明 Clouda是简单,可依赖的实时Javascript框架.对一个想开发移动webapp的开发者来说,可以使用clouda开发框架,实现一个功能和体验与native app齐平的轻 ...

  10. javascript 使用方法名作为参数

    Example <!DOCTYPE html> <html lang="en"> <head> <meta charset="u ...