最近一直在学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. CryptographicException异常处理方法

    在调用System.Security.Cryptography.ProtectedData.Protect方法来保护私密信息时,IIS可能会报以下错误:CryptographicException: ...

  2. 【转】Python练习，网络爬虫框架Scrapy

    一.概述 下图显示了Scrapy的大体架构,其中包含了它的主要组件及系统的数据处理流程(绿色箭头所示).下面就来一个个解释每个组件的作用及数据的处理过程. 二.组件 1.Scrapy Engine(S ...

  3. 详解学习C#的方法和步骤

    如果你已经有较多的面向对象开发经验,跳过以下这两步: 第一步 掌握一门.NET面向对象语言,C#或VB.NET. 强烈反对在没系统学过一门面向对象语言的前提下去学ASP.NET. ASP.NET是一个 ...

  4. swift跳转到Appstore

    //进入appstore中指定的应用 let str = NSString(format: "itms-apps://ax.itunes.apple.com/WebObjects/MZSto ...

  5. 笔记--MySQL相关操作

    一  登录数据库 1 用户无密码: mysql -uroot -p mysql-> 2 用户有密码: MySQL -root -p[passwd] mysql-> 二  创建数据库: 查询 ...

  6. console.dir() 与 console.log() 区别

    Difference console.log prints the element in an HTML-like tree console.dir prints the element in a J ...

  7. C#：复杂条件判断类型（练习）

    /// <summary> /// 文件类型 /// </summary> public enum FileType { Courseware, //"课件" ...

  8. oracle迁移postgres之-Ora2Pg

    描述 Ora2Pg:甲骨文PostgreSQL数据库模式转换器是一个免费的工具用于Oracle数据库迁移到PostgreSQL兼容模式.它连接Oracle数据库,扫描它自动提取其结构或数据,然后生成S ...

  9. Bar codes in NetSuite Saved Searches(transport/reprint)

    THIS IS A COPY FROM BLOG Ways of incorporating Bar Codes into your Netsuite Saved Searches.    Code ...

  10. js 、jsdoc生成33

    ============== js 点击事件后没方法名,调用有方法名 document.getElementById('lind').onclick=abc;//传统的id选择器 中没有# 哦 fun ...