package.json中需要引入以下依赖：
 
开发依赖：
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4”,
 
运行时依赖：
"react": "^16.6.0",
"react-dom": "^16.6.0"
 
 
webpack.config.js中需要增加以下模块解析处理规则：
{
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
}
 
更详细的安装与配置方法请参考以下链接：
 

前端技术之：使用webpack构建React程序配置方法的更多相关文章

  1. 前端优化：RequireJS Optimizer 的使用和配置方法

    RequireJS Optimizer 是 RequireJS 自带的前端优化工具,可以对 RequireJS 项目中的 JavaScript & CSS 代码使用 UglifyJS 或者 C ...

  2. webpack入门+react环境配置

    小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...

  3. webpack构建react项目(一)

    前言 下面是我们使用到技术栈: webpack + react + redux + react-router + react-thunk + ES6 + .... 注意事项: 建议使用npm5.X 或 ...

  4. webpack构建react多页面应用

    写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应 ...

  5. 前端技术之：webpack热模块替换（HMR）

    第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware   第二步:webpack配置中引入webpack对象     const we ...

  6. 【转载】基于webpack构建react项目

    第一部分链接:下载所需内容并构建基础的页面 第二部分链接:添加webpack中的一些常用babel和loader 第三部分链接:开发环境与生产环境的配置

  7. 和我一起使用webpack构建react项目

    第一步:初始化项目并创建package.json文件 第二步:创建webpack.config.js文件,并写入配置. 第三步:安装webpack以及创建es6语法环境,要将html作为模板文件解析的 ...

  8. 使用dvajs+webpack构建react开发环境

    之前我有写过博文介绍过dva.js及其用法,dva.js固然是个非常优秀的框架,但是如果用dev-cli来创建的话就会默认绑定使用roadhog而不是webpack.鉴于roadhog的文档要明显少于 ...

  9. 从零开始，教你用Webpack构建React基础工程

    参考 http://www.jianshu.com/p/4df92c335617

随机推荐

  1. Jetpack系列：应用内导航的正确使用方法

    今天小编要分享的还是Android Jetpack库的基本使用方法,本篇介绍的内容是Jetpack Navigation组件,让我们一起学习,为完成年初制定的计划而努力吧! *** 组件介绍 导航,是 ...

  2. vmware上安装centos7虚拟机

    1.1 Linux 的安装 安 装 采 用 在 虚 拟 机 中 安 装 , 以 方 便 不 同 班 级 授 课 时 , 需 要 重 复 安装的情况. 1.1.1 配置虚拟机 1. 在 VMware W ...

  3. ArcGIS Server10.1 动态图层服务

    动态图层的应用场景: 1 改变现有图层:符号,渲染方式和版本,这些都可以通过客户端请求的时候给定相应的参数来进行设置,从而来达到轻易改变地图的效果. 2 添加地图服务中没有的图层 添加的数据可以是矢量 ...

  4. js中对于数组的操作

    let myArray=[11,22,33]; console.log('原数组:',myArray); myArray.push(44,55); console.log('用push在数组后面插入元 ...

  5. 洛谷:P3950 部落冲突

    原题地址:https://www.luogu.org/problemnew/show/P3950 题目简述 给定一棵树,每次给定一个操作,有如下两种: 将某条边染黑 2.询问给定的u,v两点间是否有边 ...

  6. 关于ajax提交表单的一些实例及遇到的问题和解决办法

    ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...

  7. linux netlink通信机制简介

    一.什么是Netlink通信机制  Netlink套接字是用以实现用户进程与内核进程通信的一种特殊的进程间通信(IPC) ,也是网络应用程序与内核通信的最常用的接口. Netlink 是一种特殊的 s ...

  8. 了解ajax基本爬取方式

    '''爬去豆瓣电影数据了解ajax的基本爬去方式 ''' from urllib import requestimport jsonimport ssl url = "https://mov ...

  9. 手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝

    手把手教你吧Python应用到实际开发 不再空谈悟法☝☝☝ 想用python做机器学习吗,是不是在为从哪开始挠头?这里我假定你是新手,这篇文章里咱们一起用Python完成第一个机器学习项目.我会手把手 ...

  10. [LUOGU1868] 饥饿的奶牛 - dp二分

    题目描述 有一条奶牛冲出了围栏,来到了一处圣地(对于奶牛来说),上面用牛语写着一段文字. 现用汉语翻译为: 有N个区间,每个区间x,y表示提供的x~y共y-x+1堆优质牧草.你可以选择任意区间但不能有 ...