react项目实践——(2)webpack-dev-serve
webpack-dev-server是一个小型的静态文件服务器,为webpack打包的资源文件提供Web服务。并且提供自动刷新和Hot Module Replacement(模块热替换:前端代码变动后无需刷新整个页面,只把变化的部分替换掉)。
(1)安装
npm install webpack-dev-server --save-dev
(2)配置
修改webpack.config.js,添加devServer的配置
devServer: {
contentBase: './dist',
port: , // 默认8080
host:'localhost',
inline: true // 实时刷新
},

修改package.json,添加script脚本start: "start": "webpack-dev-server --open"

此时,在命令行输入 npm start ,则浏览器自动打开页面。
修改页面内容并保存,页面实现实时刷新。
react项目实践——(2)webpack-dev-serve的更多相关文章
- react项目实践——(1)使用webpack创建项目
1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹. mkdir webpack-demo && cd webpack-demo 2. 在./myapp中打开命令行 ...
- react项目搭建及webpack配置
1,配置webpack npm install -g webpack webpack的cli环境 npm install -g webpack-dev-se ...
- Umi + Dva + Antd的React项目实践
记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...
- react项目实践——(4)依赖安装与配置
1. 修改package.json,添加需要安装的包 { "name": "myapp", "version": "1.0.0&q ...
- react项目实践——(3)babel
1. babel Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. (1)安装 npm install --save-dev babel-core babel-e ...
- 创建react项目
npm搭建React项目 React官网提供最简便的方法是使用create-react-app npx create-react-app my-app cd my-app npm start 也可以自 ...
- 基于webpack的React项目搭建(三)
前言 搭建好前文的开发环境,已经可以进行开发.然而实际的项目中,不同环境有着不同的构建需求.这里就将开发环境和生产环境的配置单独提取出来,并做一些简单的优化. 分离不同环境公有配置 不同环境虽然有不同 ...
- 使用 webpack 搭建 React 项目
简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...
- 使用webpack搭建react项目 webpack-react-project
webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...
随机推荐
- CAP理论/AP架构/CP架构
原文地址:https://blog.csdn.net/u013058742/article/details/83541905 简书里的文章:Spring Cloud Eureka简介及与Zook ...
- [Angular] Test component template
Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular ...
- ios开发之图层与核心动画一:图层CALayer的认识
#import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutl ...
- 微信开发学习日记(七):开源微商城wemall
最近嘛,不是在调研PHP和微信的行情么. 发现,微商城是非常火爆的一个领域,既然业务有搞头,那么技术这一块也有很多选择. 网上发现了wemall这个开源的PHP实现的微商城. 下载了开源版本,PHP后 ...
- PatentTips - Integrated circuit well bias circuitry
1. Field of the Invention This invention relates in general to an integrated circuit and more specif ...
- 【codeforces 757A】Gotta Catch Em' All!
time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...
- [Angular] Reactive Form -- FormControl & formControlName, FormGroup, formGroup & formGroupName
First time dealing with Reactive form might be a little bit hard to understand. I have used Angular- ...
- [Angular] Content Projection with ng-content
For example there is tow form compoennts on the page, and what we want to do is reusing the form com ...
- 【t051】图书管理
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 图书管理是一件十分繁杂的工作,在一个图书馆中每天都会有许多新书加入.为了更方便的管理图书(以便于帮助想 ...
- 一道SQL题考你数据库的使用能力
题目:数据库中存在例如以下数据,求用户终于剩余金额. 用户 类型 金额 A 存入 100 A 存入 200 A 取出 100 A 取出 200 A 存入 300 A 取出 300 本人Oracle接触 ...