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的更多相关文章

  1. react项目实践——(1)使用webpack创建项目

    1. 新建文件夹,命名为项目名称——myapp,并打开myapp文件夹. mkdir webpack-demo && cd webpack-demo 2. 在./myapp中打开命令行 ...

  2. react项目搭建及webpack配置

    1,配置webpack npm install -g webpack                       webpack的cli环境 npm install -g webpack-dev-se ...

  3. Umi + Dva + Antd的React项目实践

    记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记.之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程. 先了解下概念 React 不多说,3大框架之一: ...

  4. react项目实践——(4)依赖安装与配置

    1. 修改package.json,添加需要安装的包 { "name": "myapp", "version": "1.0.0&q ...

  5. react项目实践——(3)babel

    1. babel Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. (1)安装 npm install --save-dev babel-core babel-e ...

  6. 创建react项目

    npm搭建React项目 React官网提供最简便的方法是使用create-react-app npx create-react-app my-app cd my-app npm start 也可以自 ...

  7. 基于webpack的React项目搭建(三)

    前言 搭建好前文的开发环境,已经可以进行开发.然而实际的项目中,不同环境有着不同的构建需求.这里就将开发环境和生产环境的配置单独提取出来,并做一些简单的优化. 分离不同环境公有配置 不同环境虽然有不同 ...

  8. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

  9. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

随机推荐

  1. eclipse设置jvm

    设置参数: -Xverify:none -Xms512m -Xmx512m -Xmn128m -XX:PermSize=96m -XX:MaxPermSize=96m -XX:+UseConcMark ...

  2. iOS开发Quartz2D 三 进度条的应用

    一:效果如图: 二:代码 #import "ViewController.h" #import "ProgressView.h" @interface View ...

  3. Kinect舒适区范围--UE4 的Blueprint测试范例

    本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接: http://blog.csdn.net/cartzhang/article/details/44748475 作者:ca ...

  4. http://lists.mysql.com/mysql

    http://lists.mysql.com/mysql http://www.ehowstuff.com/how-to-fix-mysql-database-error-cant-create-da ...

  5. 小强的HTML5移动开发之路(44)——JqueryMobile中的按钮

    一.链接按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  6. Android 用LinkedList实现队列

    队列 队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有元素时,称为空队列. 在 ...

  7. Java中的equals比较,小坑一个

    最近工作中,经常需要比较2个对象的值.有个问题经常遇到,就是下面的2种情况. public static void main(String[] args) { Integer a =11; Objec ...

  8. Tools:downloading and Building EDK II工具篇:安装/使用EDKII源代码获取/编译工具[2.3]

    Tools:Installing and using the Required Tools for downloading and Building EDK II工具篇:安装/使用EDKII源代码获取 ...

  9. uboot中rtc顶层分析

    uboot一般不会要求开启rtc,只是还是支持rtc以备特殊需求的. 底层驱动移植前面两篇已经介绍.这里介绍顶层的调用过程.顶层在uboot/common/cmd_date.c /* * (C) Co ...

  10. D3.js以及通用JS(JavaScript)读取并解析server端JSON的注意事项

    这个需求事实上挺明白的.可是网上搜出来的教程都乱七八糟,认为实在须要自己总结一下. D3.js眼下已经被广泛使用在数据可视化领域,随着大数据的持续发展,这个框架预计会在今后更加流行(据说其作者Mike ...