最近一直在学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. 。。。IO流的学习之一。。。

    文件写入流FileWriter的使用: import static org.junit.Assert.*; import java.io.File; import java.io.FileWriter ...

  2. Linux Bond的原理及其不足

    http://www.tektea.com/archives/1969.html. 在企业及电信Linux服务器环境上,网络配置都会使用Bonding技术做网口硬件层面的冗余,防止单个网口应用的单点故 ...

  3. Docker相关文档

    网上找到的一个入门级Docker学习笔记,写的不错,值得一看. 转自:http://www.open-open.com/lib/view/open1423703640748.html#articleH ...

  4. 【转帖】ActiveX部件不能创建对象的终极解决方案

    建一个批处理文件,内容如下: echo 正在修复,这个过程可能需要几分钟,请稍候-- rundll32.exe advpack.dll /DelNodeRunDLL32 %systemroot%Sys ...

  5. [转载] 不查资料确定int型整数的最大值和最小值

    原文地址:http://blog.csdn.net/zhanghuoding/article/details/42719213 想法来自于书中的习题. Java的话直接输出 Integer.MAX_V ...

  6. C语言 01 形参实参

    之前的都在印象笔记记录 continue 结束本轮循环体,进入下一次循环.break 直接结束整个while循环 形参:定时函数时函数名后面中的参数实参:调用函数时传入的具体数据基本数据类型作为形参, ...

  7. 使用tmpfs作为缓存加速缓存的文件目录

    使用tmpfs作为缓存加速缓存的文件目录 [root@web02 ~]# mount -t tmpfs tmpfs /dev/shm -o size=256m[root@web02 ~]# mount ...

  8. 关于HandlerThread的分析

    Android中的Thread没有对java中的Thread做任何封装,而Android提供了一个遍历方法HandlerThread,他继承于Thread,实现了对遍历系统的一些封装,下面研究一下Ha ...

  9. [密码学] C++ 实现 AES128 加密算法

    概述 清理邮箱的时候翻出来的. 很久以前写的,理解加密算法用的,当时记得是还撸了两天晚上撸出来的代码,放上来留个纪念好啦. 补上Tutorial,就当考古吧. 写代码时候毕竟年轻,问题也不少,但现在这 ...

  10. js 方法封装实例

    (function(){ if(windows.Mr_2_B){windows.Mr_2_B={};} function trim(txt){return txt.replace(/(^\s*|(\s ...