webpack-dev-server 搭建本地服务以及浏览器实时刷新

一、概述

开发项目中为了保证上线，开发项目是都需要使用localhost进行开发，以前的做法就是本地搭建Apache或者Tomcat服务器。有的前端开发人员 对服务器的搭建和配置并不熟悉，这个时候需要后台开发人员进行帮忙，有的时候后台开发人员还爱答不理的。为了解决这个爱答不理的问题，webpack-dev-server出现了，它的出现告诉后台开发人员，不用你们了。

webpack-dev-server的作用不只是搭建本地服务器，大家知道使用webpack可以 进行监听和打包文件，但是如果文件比较多，webpack执行会非常的慢，webpack-dev-server就可以解决 慢的问题。另一方面，webpack-dev-server可以进行浏览器的实时刷新， 避免了修改代码手动执行刷新功能。


webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议，原始文件作出改动后，webpack-dev-server会实时的编译。


注意：启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件。


二、webpack-dev-server 安装


由于webpack-dev-server和webpack不是一个资源包，所以，需要单独安装webpack-dev-server资源包：

全局安装

npm install webpack-dev-server －g


项目安装


npm install webpack-dev-server --save-dev


这里建议进行项目安装，这样别人开发的时候只需要执行npm install 命令就能安装了，没有必须单独进行 全局安装了。


三、webpack-dev-server 服务器

首先我们看一下 都有哪些参数可选项：


--content-base //设定webpack-dev-server的director根目录。如果不进行设定的话，默认是在当前目录下。
--quiet: //控制台中不输出打包的信息，开发中一般设置为false，进行 打印，这样查看错误比较方面
--no-info: // 不显示任何信息
--colors: //对信息进行颜色输出
--no-colors: //对信息不进行颜色输出
--compress:  //开启gzip压缩
--host <hostname/ip>: //设置ip
--port <number>: //设置端口号，默认是:8080
--inline: //webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,
--hot: //开发热替换
--open: //启动命令，自动打开浏览器
--history-api-fallback: //查看历史url

 

这里只是列举一下常用了的，相关的参数可以查看：http://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli

1、content-base


设定webpack-dev-server的根目录。如果不进行设定的话，默认是在当前目录下。

webpack-dev-server --content-base ./assets


这个时候还要注意的一点就是在webpack.config.js文件里面，如果配置了output的publicPath这个字段的值的话，在index.html文件里面也应该做出调整。因为webpack-dev-server的根目录是相对publicPath这个路径的。因此，如果你的webpack.config.js配置成这样的：

 module.exports = {entry: './src/js/index.js',output: {path: './dist/js',filename: 'bundle.js'，publicPath: '/assets/'}}


那么，在index.html文件当中引入的路径也发生相应的变化:

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Demo</title></head><body><script src="assets/bundle.js"></script></body></html>


如果在webpack.config.js里面没有配置output的publicPath的话，那么index.html最后引入的文件js文件路径应该是下面这样的。

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Demo</title></head><body><script src="bundle.js"></script></body></html>

 

直接在命令行执行一下命令，就可以启动服务器：


webpack-dev-server --content-base ./assets



四、webpack-dev-server 的热替换


webpack-dev-server支持2种自动刷新的方式：

  • Iframe mode， webpack-dev-server默认的刷新模式

  • inline mode


1、Iframe mode


Iframe mode刷新模式是在网页中嵌入了一个iframe，将我们自己的应用注入到这个iframe当中去，因此每次你修改的文件后，都是这个iframe进行了reload。

启动Iframe mode刷新模式直接使用命令就可以启动了：


webpack-dev-server --content-base ./dist



浏览器访问的路径是:

localhost:8080/webpack-dev-server/index.html。



2、Inline-mode

Inline-mode刷新模式是直接刷新页面，不会在页面增减任何的元素或者js插件，它是直接放在内存中，这种方式也是官方推荐的，并且速度相对来说比较快。实现Inline-mode刷新模式 有很多的方法，下面我们来列举一下：

方法一：将代码内联到入口配置文件webpakc.config.js文件entry属性里面，并且添加new webpack.HotModuleReplacementPlugin()热点插件



var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");module.exports = {//项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字entry: ['webpack-dev-server/client?http://localhost:8080/','./src/index.js'],//输出的文件名,合并以后的js会命名为bundle.jsoutput: {path: path.join(__dirname, "dist/"),publicPath: "http://localhost:8088/dist/",filename: "bundle.js"},plugins: [new webpack.HotModuleReplacementPlugin()]
};


这种方式比较容易，但是不够灵活，需要添加相关的热点插件。

 
 
方法二、直接在你index.html引入这部分代码:

<script src="http://localhost:8080/webpack-dev-server.js"></script>


这种方法更不好，项目上线还需要手动删除，坚决杜绝这些方法。


方法三、

　　直接实现一个server.js，启动服务器(需要启动热替换plugin)

var webpack = require('webpack');　　
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000"); // 将执替换js内联进去
config.entry.index.unshift("webpack/hot/only-dev-server");var compiler = webpack(config);
var server = new webpackDevServer(compiler, {hot: true,historyApiFallback: false,// noInfo: true,stats: {　　colors: true // 用颜色标识},proxy: {　　　　"*": "http://localhost:9000" // 用于转发api数据，但webpack自己提供的并不太好用},
});
server.listen(9000);

 



方法四、

     直接在webpack.config.js上配置。这个办法最简单，当然灵活性没有自己实现一个服务器好。

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录//用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = {//项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字entry: ['./src/index.js'],//输出的文件名,合并以后的js会命名为bundle.jsoutput: {path: path.join(__dirname, "dist/"),publicPath: "http://localhost:8088/dist/",filename: "bundle.js"},devServer: {historyApiFallback: true,contentBase: "./",quiet: false, //控制台中不输出打包的信息noInfo: false,hot: true,inline: true,lazy: false,progress: true, //显示打包的进度watchOptions: {aggregateTimeout: 300},port: '8088'}
};




五、配置webpackDemo项目本地 服务器

上面我们讲解了webpack-dev-server 搭建本地服务以及浏览器实时刷新的相关方法和配置，我们选择方法四 直接在webpack.config.js使用devServer配置服务器以及热点替换。内容如下：

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录//用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = {//项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字entry: ['./src/index.js'],//输出的文件名,合并以后的js会命名为bundle.jsoutput: {path: path.join(__dirname, "dist/"),publicPath: "http://localhost:8088/dist/",filename: "bundle.js"},devServer: {historyApiFallback: true,contentBase: "./",quiet: false, //控制台中不输出打包的信息noInfo: false,hot: true,inline: true,lazy: false,progress: true, //显示打包的进度watchOptions: {aggregateTimeout: 300},port: '8088'}
};



 这个时候index.html内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script src="dist/bundle.js"></script>
</head>
<body>
<h1>welcome to 68kejian.com</h1>
</body>
</html>


 
然后在命令行执行一下操作启动 服务：

webpack-dev-server --hot --inline


 在浏览器输入:localhost:8088, 这里我们设置的端口号是:8088

这个时候随意修改login.js的userName的值，看看页面是不是刷新了。

转载于:https://www.cnblogs.com/liuchuanfeng/p/6802582.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/416798.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

java调用kafka

java调用kafka

pom.xml <dependency> <groupId>org.apache.kafka</groupId> <artifactId>kafka-clients</artifactId> <version>2.3.1</version> </dependency> 注意调试通过后要添加…
阅读更多...
[Noi2015]软件包管理器

[Noi2015]软件包管理器

来自FallDream的博客&#xff0c;未经允许&#xff0c;请勿转载&#xff0c;谢谢。 Linux用户和OSX用户一定对软件包管理器不会陌生。通过软件包管理器&#xff0c;你可以通过一行命令安装某一个软件包&#xff0c;然后软件包管理器会帮助你从软件源下载软件包&#xff0c;同时…
阅读更多...
ELK+Kafka部署

ELK+Kafka部署

目录 1.背景 2.ELK的配置 2.1.下载 2.2.关闭防火墙 2.3.安装elasticsearch 2.4.安装Logstash 2.5.安装Kibana 2.6.Java日志输出到Logstash 2.7.OSS版本 3.Kafka的配置 3.1.zookeeper搭建 3.2.kafka搭建 4.整合 1.背景 高日志压力情况下&#xff0c;为了避免Logsta…
阅读更多...
前端学习（2432）：关于组件和目录名

前端学习（2432）：关于组件和目录名

阅读更多...
Allegro改动shape网络节点

Allegro改动shape网络节点

使用Allegro时改动shape的网络节点方法&#xff1a; ①选择shape->Select Shape or Void/Cavity ②选择要改动的shape ③点击&#xff08;...&#xff09;改动网络节点的名字 ④改动完毕 转载于:https://www.cnblogs.com/claireyuancy/p/6804046.html
阅读更多...
前端学习（2433）：创建页面组件

前端学习（2433）：创建页面组件

阅读更多...
ELK套件FileBeat部署

ELK套件FileBeat部署

目录 1.简介 2.下载 3.直接输出到ElasticSearch 4.输出到Logstash 5.更改nginx日志路径 6.logstash负载均衡 7.日志文件直接作为输入 1.简介 FileBeat用于文件数据采集并输出到ElasticSearch或Logstash中。 ELK搭建过程参见&#xff1a; ELK搭建及Java程序接入 2.下载…
阅读更多...
python基础之数据类型

python基础之数据类型

python基础之数据类型 字符串(string) 用引号括起的都是字符串,其中的引号可以是单引号, 也可以是双引号1.使用方法修改字符串的大小写 例&#xff1a; >>> name "ada lovelace" >>> print name.title() Ada Lovelace >>> print(name.up…
阅读更多...
MetricBeat（win/linux）部署 系统CPU内存等资源情况监控

MetricBeat（win/linux）部署 系统CPU内存等资源情况监控

目录 1.下载 2.linux系统监控 ​3.启用模块 4.windows系统监控 1.下载 下载MetricBeat的linux和windows版本 https://artifacts.elastic.co/downloads/beats/metricbeat/metricbeat-oss-7.2.1-linux-x86_64.tar.gz https://artifacts.elastic.co/downloads/beats/metricbea…
阅读更多...
android CoordinatorLayout使用

android CoordinatorLayout使用

一、CoordinatorLayout有什么作用 CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能&#xff1a; 1、作为顶层布局 2、调度协调子布局 CoordinatorLayout使用新的思路通过协调调度子布局的形式实现触摸影响布局的形式产生动画效果。CoordinatorLayout通过…
阅读更多...
deepin15.11系统体验

deepin15.11系统体验

目录 1.下载 2.安装 3.装好后的体验 4.命令情况 5.windows共享 6.总结 听说华为笔记本都预装deepin&#xff0c;下载下来体验下 vmware创建linux系统&#xff0c;版本选择Other Linux 4.x or later kernel 64-bit 1.下载 官网 https://www.deepin.org/ 从官网下载iso真心…
阅读更多...
带视觉差的轮播图

带视觉差的轮播图

最终结果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html> <head lang"en"><meta charset"UTF-8"><title></title><style>html {box-sizing: border-box;font-family: Open Sans, sans-serif;}*, *:befor…
阅读更多...
深度终端：ubuntu等linux下好用的远程终端软件

深度终端：ubuntu等linux下好用的远程终端软件

终端好不好用&#xff0c;直接上图&#xff0c;有图有真相—— 这终端不错啊&#xff0c;可以添加远程链接信息&#xff0c;像xshell似的&#xff0c;比ubuntu那些的终端强多了&#xff0c;每次都得一步步连。 怎么装&#xff1f; sudo apt install -y deepin-terminal PS&…
阅读更多...
大数据产品的备份及恢复

大数据产品的备份及恢复

Hbase Distcp方式整体下载上传方式CopyTable备份Export工具elasticsearch 建立备份快照数据挂载点建立快照仓储repository建立snapshot快照备份恢复snapshot快照数据 原集群恢复新集群恢复HDFSHbase的备份恢复 hbase数据备份策略有两类&#xff1a; 离线备份&#xff08;关闭Hb…
阅读更多...
centos7 greenplum6.1开源版本编译

centos7 greenplum6.1开源版本编译

greenplum开源版本 https://greenplum.org/ 其官方手册 https://greenplum.org/documentation/ 其下载介质地址 https://github.com/greenplum-db/gpdb/releases 本次下载src-full https://github.com/greenplum-db/gpdb/releases/download/6.1.0/6.1.0-src-full.zip 编译参…
阅读更多...
Centos7 Greenplum6.1开源版本集群部署

Centos7 Greenplum6.1开源版本集群部署

目录 1.前言 1.1参照文档 1.2部署包 1.3服务器环境 2 准备工作 2.1 Linux用户 2.2 主机名和hosts配置 2.3 防火墙 2.4 系统资源配置 2.5 暂时启用gpadmin sudo 2.6 复制配置文件到所有节点上 3 安装Greenplum DB 3.1 在Master节点上安装Greenplum DB 3.2 在Master…
阅读更多...
转 C#对多个集合和数组的操作(合并,去重,判断)

转 C#对多个集合和数组的操作(合并,去重,判断)

在开发过程中.数组和集合的处理是最让我们担心.一般会用for or foreach 来处理一些操作.这里介绍一些常用的集合跟数组的操作函数. 首先举例2个集合A,B. List<int> listA new List<int> {1,2,3,5,7,9}; List<int> listB new List<int> {13,4,17,29…
阅读更多...
centos7 postgresql9和postgis2.1插件编译部署

centos7 postgresql9和postgis2.1插件编译部署

目录 依赖安装 下载编译libgeos 下载编译proj4 编译Postgresql9 编译PostGIS2 启动postgresql服务 开通外部网络访问 数据库开启PostGIS扩展 查看PostGIS版本 升级PostGIS版本 依赖安装 这个命令里面安装的包可能会多&#xff0c;由于是编译GreenPlum用的&#xff0…
阅读更多...
三国人物共现网络

三国人物共现网络

三国部分人物共现图 转载于:https://www.cnblogs.com/jzssuanfa/p/6814865.html
阅读更多...
Spark单独集群模式部署

Spark单独集群模式部署

目录 网络配置 SSH 免密码登录 部署 执行测试 网络配置 192.168.81.157 node1 master 192.168.81.158 node2 slave1 192.168.81.159 node3 slave2 相同的配置先在一个节点上配置&#xff0c;配置完成后复制到其它节点上。 vi /etc/hosts 192.168.81.157 node1 192.168.…
阅读更多...
最新文章

Copyright @ 2022~2023