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

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

svn 使用TortoiseSVN server搭建本地SVN服务器
使用TortoiseSVN server搭建本地SVN服务器转载于:https://www.cnblogs.com/fireblackman/p/10799625.html
node 搭建本地服务
// node 搭建本地服务 // 第一步使用npm install express(个人喜欢) // 第二步 npm init 初始化当前项目 // 第三步引入express const Api ...
Webpack dev-server搭建本地服务
WebPack-dev-server搭建本地服务器文章目录 WebPack-dev-server搭建本地服务器 dev-server简述一.安装&配置dev-server 二.使用dev- ...
关于SQL Server 2008R2本地服务的数据库引擎里没有实例名问题
如上图显示,数据库引擎没有子节点(+),也就是说里面没有实例名,没有实例名也就无法登陆. 这时候该怎么办呢,你就去检查下你服务里面的MSSQLSERVER~(注:服务名默认的是MSSQLSERVER, ...
webpack 4 热更新后台成功更新浏览器不刷新
上一篇文章写的是 webpack4 打包,但是每次修改代码都要重新执行一次打包命令,实在是麻烦,本文将推出我的实现,仅做参考!!! 1.安装 webpack-dev-server npm instal ...
Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
银河麒麟V10 SP2 server 搭建 ntp服务端
目录前言一.Ntp 二.使用步骤 1.矫正本机时区/时间 2.配置主配置文件 3.重启ntp服务三.客户端配置前言 ntp服务作为内网常用的时钟同步服务,在集群的搭建中有比较常见的使用一.N ...
WEBPACK DEV SERVER
文/tsyeyuanfeng(简书作者) 原文链接:http://www.jianshu.com/p/941bfaf13be1# 著作权归作者所有,转载请联系作者获得授权,并标注"简书作者& ...
phpstudy搭建网站使用php,教你用phpstudy搭建本地服务并建dedecms网站
首先百度搜索PHPstudy软件,将次软件下载下来,百度输入www.dedecms.com,讲dedecms5.7版本网站模板下载下来,下载截图如下: phpstuduy是一款在windows系统环境 ...

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

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

最新文章

热门文章