React开始前的准备(下):

·配置webpack热加载(热加载就是修改js文件,点击保存之后,浏览器会自动刷新,提高开发效率)

1. 全局安装:

npm install webpack -g
npm install webpack-dev-server -g

2. 当前项目安装:

npm install webpack --save
npm install webpack-dev-server --save
npm install html-webpack-plugin -D

3. 初始化配置

创建文件:webpack.config.js

里面内容如下:

var webpack = require('webpack');
var path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); //这个插件可以把打包的budle.js使用<scipt>引入到html中
const htmlWebpackPluginConfig = new htmlWebpackPlugin({
template: './app.html',
inject: true,
filename: 'index.html'
}) module.exports = {
context:__dirname+'/src',
entry:"./js/index.js",
module:{
loaders: [{
test:/\.js?$/,
exclude:/(node_modules)/,
loader: 'babel-loader',
query:{
presets:['react','es2015']
}
}]
},
output:{
path:__dirname + "/dist/assets",
filename:"bundle.js"
},
devServer: {
contentBase: __dirname + "/src", // New
},
plugins:[htmlWebpackPluginConfig]
}

4.React热加载

这个时候,react和webpack的开发环境就已经搭建的差不多了,接下来我们会结合react的组件写一个小的demo,通过webpack的热加载,来了解热加载同时接触第一个react组件的编译。

webpack-dev-server

React入门---开始前的准备(下)-3的更多相关文章

  1. React入门---开始前的准备(上)-2

    开始前准备: 1.安装配置nodeJs(nodeJS官网) 检查安装成功: node -v npm -v 2.使用NPM配置React开发环境 (1). 创建项目文件夹(创建文件夹时,文件夹名不要起为 ...

  2. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  3. React入门 (1)—使用指南(包括ES5和ES6对比)

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  4. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  5. react 入门教程 阮一峰老师真的是榜样

    -  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...

  6. React入门实例教程

    文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...

  7. React 入门实例教程(转载)

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  8. 【转】react入门实例教程

    作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html    github地址https:/ ...

  9. React 入门实例教程【转】

    Any day will do. 哪一天都行 Are you kidding? 你在开玩笑吧! Congratulations! 祝贺你! I don’t mean it. 我不是故意的. 原文作者: ...

随机推荐

  1. oracle物理视图(转)

    近期根据项目业务需要对oracle的物化视图有所接触,在网上搜寻关于这方面的资料,便于提高,整理内容如下: 物化视图是一种特殊的物理表,“物化”(Materialized)视图是相对普通视图而言的.普 ...

  2. 用Caffe生成对抗样本

    同步自我的知乎专栏:https://zhuanlan.zhihu.com/p/26122612 上篇文章 瞎谈CNN:通过优化求解输入图像 - 知乎专栏 中提到过对抗样本,这篇算是针对对抗样本的一个小 ...

  3. Java基础—String类小结

    一.String类是什么 public final class String implements java.io.Serializable, Comparable<String>, Ch ...

  4. Java设计模式GOF之单例模式

    一.单例模式(Singleton) 1.单例模式应用场景: ①Servlet ②任务管理器 ③链接池 ④Spring中每个 bean 默认是单例 ⑤网站计数器 2.单例要求 ①构造器私有 ②私有的静态 ...

  5. Luogu1074靶形数独【启发式搜索】

    Luogu1074靶形数独 题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教, ...

  6. 【Android 系统开发】CyanogenMod 13.0 源码下载 编译 ROM 制作 ( 手机平台 : 小米4 | 编译平台 : Ubuntu 14.04 LTS 虚拟机)

                 分类: Android 系统开发(5)                                              作者同类文章X 版权声明:本文为博主原创文章 ...

  7. JavaScript原生Array常用方法

    JavaScript原生Array常用方法 在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), so ...

  8. 原生js实现tab切换

    //通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...

  9. WebService基础学习(二)—三要素

    一.Java中WebService规范      JAVA 中共有三种WebService 规范,分别是JAX-WS.JAX-RS.JAXM&SAAJ(废弃).   1.JAX-WS规范    ...

  10. C#设计模式:责任链模式

    设计模式是面向对象编程的基础,是用于指导程序设计.在实际项目开发过程中,并不是一味将设计模式进行套用,也不是功能设计时大量引入设计模式.应该根据具体需求和要求应用适合的设计模式.设计模式是一个老话题了 ...