React入门---开始前的准备(下)-3
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的更多相关文章
- React入门---开始前的准备(上)-2
开始前准备: 1.安装配置nodeJs(nodeJS官网) 检查安装成功: node -v npm -v 2.使用NPM配置React开发环境 (1). 创建项目文件夹(创建文件夹时,文件夹名不要起为 ...
- React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- React入门 (1)—使用指南(包括ES5和ES6对比)
前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
- 2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- react 入门教程 阮一峰老师真的是榜样
- 转自阮一峰老师博客 React 入门实例教程 作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Nati ...
- React入门实例教程
文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...
- React 入门实例教程(转载)
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
- 【转】react入门实例教程
作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html github地址https:/ ...
- React 入门实例教程【转】
Any day will do. 哪一天都行 Are you kidding? 你在开玩笑吧! Congratulations! 祝贺你! I don’t mean it. 我不是故意的. 原文作者: ...
随机推荐
- oracle物理视图(转)
近期根据项目业务需要对oracle的物化视图有所接触,在网上搜寻关于这方面的资料,便于提高,整理内容如下: 物化视图是一种特殊的物理表,“物化”(Materialized)视图是相对普通视图而言的.普 ...
- 用Caffe生成对抗样本
同步自我的知乎专栏:https://zhuanlan.zhihu.com/p/26122612 上篇文章 瞎谈CNN:通过优化求解输入图像 - 知乎专栏 中提到过对抗样本,这篇算是针对对抗样本的一个小 ...
- Java基础—String类小结
一.String类是什么 public final class String implements java.io.Serializable, Comparable<String>, Ch ...
- Java设计模式GOF之单例模式
一.单例模式(Singleton) 1.单例模式应用场景: ①Servlet ②任务管理器 ③链接池 ④Spring中每个 bean 默认是单例 ⑤网站计数器 2.单例要求 ①构造器私有 ②私有的静态 ...
- Luogu1074靶形数独【启发式搜索】
Luogu1074靶形数独 题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他 们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教, ...
- 【Android 系统开发】CyanogenMod 13.0 源码下载 编译 ROM 制作 ( 手机平台 : 小米4 | 编译平台 : Ubuntu 14.04 LTS 虚拟机)
分类: Android 系统开发(5) 作者同类文章X 版权声明:本文为博主原创文章 ...
- JavaScript原生Array常用方法
JavaScript原生Array常用方法 在入门Vue时, 列表渲染一节中提到数组的变异方法, 其中包括push(), pop(), shift(), unshift(), splice(), so ...
- 原生js实现tab切换
//通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...
- WebService基础学习(二)—三要素
一.Java中WebService规范 JAVA 中共有三种WebService 规范,分别是JAX-WS.JAX-RS.JAXM&SAAJ(废弃). 1.JAX-WS规范 ...
- C#设计模式:责任链模式
设计模式是面向对象编程的基础,是用于指导程序设计.在实际项目开发过程中,并不是一味将设计模式进行套用,也不是功能设计时大量引入设计模式.应该根据具体需求和要求应用适合的设计模式.设计模式是一个老话题了 ...