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. unity插件开发——MenuItem

    有unity中的菜单栏是我们经常使用到的地方,如下图: MenuItem的作用就是增加一个自己的菜单 使用方法: 在工程中Assets目录下任意一个Editor目录(以后简称Editor目录,如果不存 ...

  2. JS——控制标记的样式

    1.定义一个div,宽度为100px,高度为100px,背景色为粉色. 定义一个事件,鼠标移入时背景色变为蓝色,宽度变为200px. 定义一个事件,鼠标移出时背景色变为红色. html文件: < ...

  3. C语言使用clock进行计时

    #include "stdio.h" #include "stdlib.h" #include "time.h" int main( voi ...

  4. POPTEST老李推荐:互联网时代100本必读书,来自100位业界大咖推荐 2

    ➤NO.30<移动的力量>[推荐人]刘九如:电子工业出版社副社长兼总编辑邬贺铨:中国工程院院士.原副院长汪力成:华立集团董事局主席➤NO.31<智慧社会>[推荐人]段永朝:财讯 ...

  5. Oracle常用数据字典

    1.查看所有存储过程.索引.表格.PACKAGE.PACKAGE BODY select * from user_objects; 2.查询所有的Job select * from user_jobs ...

  6. php 1到100累加 新方法

    <?php $sum = 0; for($i=0;$i<=100;$i++){ $sum += $i; } echo $sum; 之前只是这么写. 现在发现可以这么写 $sum = arr ...

  7. Uva 11076 Add Again (数论+组合数学)

    题意:给你N个数,求把他们的全排列加和为多少 思路:对于这道题,假设数字k1在第一位,然后求出剩下N-1位的排列数num1,我们就可以知道k1在第一位时 排列有多少种为kind1, 同理,假设数字k2 ...

  8. 我的iOS-App

    1.PocketConfidential(密保箱) 简介 保存账号密码等敏感信息. 应用技术: sqlite.sqlcipher加密.AES数据加密.GCD https://itunes.apple. ...

  9. 最小函数值 洛谷P2085

    题目描述:          有n个函数,分别为F1,F2,...,Fn.定义Fi(x)=Ai*x^2+Bi*x+Ci (x∈N*).给定这些Ai.Bi和Ci,请求出所有函数的所有函数值中最小的m个( ...

  10. 关于string类型定义占几个字节??

    测试代码: #include <iostream>using namespace std;int main(void){ string name; cout<<"si ...