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. 搭建hbase-0.94.26集群环境 分类: B7_HBASE 2015-01-24 17:14 861人阅读 评论(0) 收藏

    先安装hadoop1.2.1,见http://blog.csdn.net/jediael_lu/article/details/38926477 1.配置hbase-site.xml <prop ...

  2. 解密Arm中国:全球最具影响力的芯片公司中国布局浮出水面

    经济观察报 记者 陈伊凡 沈怡然 李华清 对于Arm与中国合资公司事宜,5月4日下午,Arm授权的代表邮件回复<经济观察报>称:“合资公司目前刚开始运营”,“我们的重点是让这个新的合资公司 ...

  3. HQL和SQL的区别

    1.hql与sql的区别 sql 面向数据库表查询 hql 面向对象查询 hql : from 后面跟的 类名+类对象 where 后 用 对象的属性做条件 sql: from 后面跟的是表名    ...

  4. 阿里云OSS工具类

    [前言] 我们上家公司的存储系统用的是FastDFS(智能一代云平台(二十八):对前后端分离和FastDFS的使用的再理解):现在在职的公司用的是阿里云的OSS(OSS的官方文档),在工作的时候整理一 ...

  5. Mysql错误: ERROR 1205: Lock wait timeout exceeded解决办法(MySQL锁表、事物锁表的处理方法)

    Java执行一个SQL查询未提交,遇到1205错误. java.lang.Exception: ### Error updating database.  Cause: java.sql.SQLExc ...

  6. Delphi 获取Internet缓存文件 -- FindFirstUrlCacheEntry FindNextUrlCacheEntry

    下面是我写的一个函数,把所有的缓存文件路径添加到一个字符串列表中,直接看代码,带了注释.另外还有删除缓存等等大家自己到msdn找找. 需要引用 WinInet // 获取Internet缓存文件 fu ...

  7. iOS中拉伸图片的几种方式

    假如下面的一张图片,是用来做按钮的背景图片的,原始尺寸是(128 * 112) 按钮背景图片.png 我们通过代码将这张图片设置为按钮的背景图片,假如我们将创建好的按钮的宽高设置为:(W=200, H ...

  8. bash 提示用户输入 choice

    read -p "Continue (y/n)?" choice case "$choice" in y|Y ) echo "yes";; ...

  9. 微信小程序初步运营方案

    小程序的运营方案有很多种,目前我们遇到两个事情需要解决:1.问答的内容,这块也是大家比较关心的话题.内容的定位和细节. 2.预热与推广,就这两个问题,我列出了一些自己的想法和小程序初步运营方案,有不足 ...

  10. git 分支建立及合并

    分支的新建与合并 让我们来看一个简单的分支新建与分支合并的例子,实际工作中你可能会用到类似的工作流. 你将经历如下步骤: 开发某个网站. 为实现某个新的需求,创建一个分支. 在这个分支上开展工作. 正 ...