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. python3报错

    这个错误是我在从Excel中导入数据,,x,y 和z(z代表了强度)  然后通过xyz画出一个二维的灰度图片所出现的错误 原因是因为用mcml生成的数据如: TypeError: cannot per ...

  2. Netty+WebSocket简单实现网页聊天

    基于Netty+WebSocket的网页聊天简单实现 一.pom依赖 <dependency>        <groupId>io.netty</groupId> ...

  3. [Webpack] Configure Prepack with Webpack

    Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ...

  4. Tomcat生产中优化JVM的配置实例

    root 1208 1 0 11月25 ? 00:15:32 /home/root/jvm/jdk1.7.0_79/bin/java -Djava.util.logging.config.file=/ ...

  5. java中关于File类的mkdirs()和FIle()构造方法在windows环境内网测试总结

    环境:环境是内网windows,传入路径的时候不带盘符,并且服务器的win10也不是超级管理员账户 关于File类的mkdirs()远程访问创建不了文件和路径的问题. 如果浏览器操作者是windows ...

  6. USB 3.0规范中译本 第7章 链路层

    本文为CoryXie原创译文,转载及有任何问题请联系cory.xie#gmail.com. 链路层具有维持链路连接性的责任,从而确保在两个链路伙伴之间的成功数据传输.基于包(packets)和链路命令 ...

  7. [.NET Core 24]把project.json迁移到.csproj

    链接:https://blog.jetbrains.com/dotnet/2017/04/04/rider-eap-update-csproj-based-net-core-support-migra ...

  8. Curator简介

    Curator简介 Curator是一个博物馆或者其它集合的监管者或者管理者,Curator有以下几个组件组成: Recipes: 实现了通用ZooKeeper的recipes, 该组件是在Frame ...

  9. 一起学Python:正则表达式概述

    re模块操作 在Python中需要通过正则表达式对字符串进行匹配的时候,可以使用一个模块,名字为re 1. re模块的使用过程 #coding=utf-8 # 导入re模块 import re # 使 ...

  10. Read-Copy Update Implementation For Non-Cache-Coherent Systems

    A technique for implementing read-copy update in a shared-memory computing system having two or more ...