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. Swift--使图片360° 周期旋转

    UIImageView+Extension.swift import UIKit extension UIImageView { // 360度旋转图片 func rotate360Degree() ...

  2. adb常用命令 分类: H1_ANDROID 2013-09-08 15:22 510人阅读 评论(0) 收藏

    安装软件  adb install apk文件名称.apk  重新安装该软件  adb install -r apk文件名称.apk  卸载apk软件  adb uninstall apk包名.apk ...

  3. 定位导致物化视图无法快速刷新的原因 分类: H2_ORACLE 2013-08-08 23:04 335人阅读 评论(0) 收藏

    转载自:http://yangtingkun.itpub.net/post/468/13318 物化视图的快速刷新采用了增量的机制,在刷新时,只针对基表上发生变化的数据进行刷新.因此快速刷新是物化视图 ...

  4. sourceinsight4

    转载 http://bbs.pediy.com/thread-215669.htm 如果你觉得软件有用,请购买正版.发布这个纯属娱乐. 转载请注明出处,谢谢! 仅修改了程序中用于License签名验证 ...

  5. iOS开发之Quzrtz2D 一:认识Quzrtz2D

    一:什么是Quzrtz2D 二:Quzrtz2D实例: 三:图形上下文 四:Quzrtz2D在ios开发中的实际价值 1.什么是Quartz2D? 他是一个二维的绘图引擎,同时支持iOS和Mac系统 ...

  6. AngularJS之基本指令(init、repeat)

    <h3>ng-init初始化变量</h3> <div ng-init="name='aurora';age='18'"> <p ng-bi ...

  7. 【codeforces 758B】Blown Garland

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  8. Android与IOS的UUID的区别

    UUID含义是通用唯一识别码 (Universally Unique Identifier),这 是一个软件建构的标准,也是被开源软件基金会 (Open Software Foundation, OS ...

  9. iOS中js与objective-c的简单交互

    1.首先是objective-c调用js中的代码,可以用UIWebview中的一个方法 stringByEvaluatingJavaScriptFromString:后面接的是js中的方法名.这个函数 ...

  10. SignalR+NAudio实现语音会话[WPF]

    原文:SignalR+NAudio实现语音会话[WPF] 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/lordwish/article/detai ...