一、概述

开发项目中为了保证上线，开发项目是都需要使用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资源包：

全局安装

  1. npm install webpack-dev-server －g

项目安装

  1. npm install webpack-dev-server --save-dev

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

三、webpack-dev-server 服务器

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

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

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

1、content-base

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

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

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

  1.  module.exports = {
  2.         entry: './src/js/index.js',
  3.         output: {
  4.             path: './dist/js',
  5.             filename: 'bundle.js'，
  6.             publicPath: '/assets/'
  7.         }
  8.     }

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

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Demo</title>
  6.     </head>
  7.     <body>
  8.         <script src="assets/bundle.js"></script>
  9.     </body>
  10.     </html>

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

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Demo</title>
  6.     </head>
  7.     <body>
  8.         <script src="bundle.js"></script>
  9.     </body>
  10.     </html>

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

  1. 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刷新模式直接使用命令就可以启动了：

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

浏览器访问的路径是:

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

2、Inline-mode

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

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

  1. var webpack = require('webpack');
  2. var WebpackDevServer = require("webpack-dev-server");
  3.  
  4. module.exports = {
  5.  
  6.     //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
  7.     entry: [
  8.         'webpack-dev-server/client?http://localhost:8080/',
  9.         './src/index.js'
  10.     ],
  11.  
  12.     //输出的文件名,合并以后的js会命名为bundle.js
  13.     output: {
  14.         path: path.join(__dirname, "dist/"),
  15.         publicPath: "http://localhost:8088/dist/",
  16.         filename: "bundle.js"
  17.     },
  18.     plugins: [
  19.         new webpack.HotModuleReplacementPlugin()
  20.     ]
  21. };

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

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

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

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

方法三、

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

  1. var webpack = require('webpack');　　
  2. var webpackDevMiddleware = require("webpack-dev-middleware");
  3. var webpackDevServer = require('webpack-dev-server');
  4. var config = require("./webpack.config.js");
  5.  
  6. config.entry.index.unshift("webpack-dev-server/client?http://localhost:9000"); // 将执替换js内联进去
  7. config.entry.index.unshift("webpack/hot/only-dev-server");
  8.  
  9. var compiler = webpack(config);
  10. var server = new webpackDevServer(compiler, {
  11.     hot: true,
  12.     historyApiFallback: false,
  13.     // noInfo: true,
  14.     stats: {　　
  15.         colors: true // 用颜色标识
  16.             　　
  17.     },
  18.     　　proxy: {　　　　
  19.         "*": "http://localhost:9000" // 用于转发api数据，但webpack自己提供的并不太好用
  20.     },
  21. });
  22. server.listen(9000);

方法四、

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

  1. var webpack = require('webpack');
  2. var WebpackDevServer = require("webpack-dev-server");
  3. var path = require('path');
  4. var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
  5. var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录
  6. var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
  7. var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录
  8.  
  9. //用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用
  10. var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
  11.  
  12. module.exports = {
  13.  
  14.     //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
  15.     entry: [
  16.         './src/index.js'
  17.     ],
  18.  
  19.     //输出的文件名,合并以后的js会命名为bundle.js
  20.     output: {
  21.         path: path.join(__dirname, "dist/"),
  22.         publicPath: "http://localhost:8088/dist/",
  23.         filename: "bundle.js"
  24.     },
  25.     devServer: {
  26.         historyApiFallback: true,
  27.         contentBase: "./",
  28.         quiet: false, //控制台中不输出打包的信息
  29.         noInfo: false,
  30.         hot: true,
  31.         inline: true,
  32.         lazy: false,
  33.         progress: true, //显示打包的进度
  34.         watchOptions: {
  35.             aggregateTimeout: 300
  36.         },
  37.         port: '8088'
  38.     }
  39. };

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

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

  1. var webpack = require('webpack');
  2. var WebpackDevServer = require("webpack-dev-server");
  3. var path = require('path');
  4. var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
  5. var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录
  6. var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
  7. var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录
  8.  
  9. //用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用
  10. var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
  11.  
  12. module.exports = {
  13.  
  14.     //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
  15.     entry: [
  16.         './src/index.js'
  17.     ],
  18.  
  19.     //输出的文件名,合并以后的js会命名为bundle.js
  20.     output: {
  21.         path: path.join(__dirname, "dist/"),
  22.         publicPath: "http://localhost:8088/dist/",
  23.         filename: "bundle.js"
  24.     },
  25.     devServer: {
  26.         historyApiFallback: true,
  27.         contentBase: "./",
  28.         quiet: false, //控制台中不输出打包的信息
  29.         noInfo: false,
  30.         hot: true,
  31.         inline: true,
  32.         lazy: false,
  33.         progress: true, //显示打包的进度
  34.         watchOptions: {
  35.             aggregateTimeout: 300
  36.         },
  37.         port: '8088'
  38.     }
  39. };

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<script src="dist/bundle.js"></script>
  7. </head>
  8. <body>
  9. <h1>welcome to 68kejian.com</h1>
  10. </body>
  11. </html>

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

  1. webpack-dev-server --hot --inline

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

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

webpack-dev-server 搭建本地服务以及浏览器实时刷新的更多相关文章

  1. 配置Webpack Dev Server 实战操作方法步骤

    本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...

  2. Ubuntu Server搭建svn服务以及迁移方法【转】

    转自:http://www.linuxidc.com/Linux/2013-05/84693.htm Ubuntu Server搭建svn服务以及迁移方法 采用apache+svn,http访问方式. ...

  3. 笔记：配置 webpack dev server

    笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...

  4. svn 使用TortoiseSVN server搭建本地SVN服务器

    使用TortoiseSVN server搭建本地SVN服务器

  5. [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

    Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...

  6. 12. Vue搭建本地服务

    一. 搭建本地服务器 本地服务可以提高开发效率. webpack不需要每次都打包, 就可以看到修改后的效果. 本地服务器基于node.js搭建, 内部使用二十express框架. 可以实现让浏览器自动 ...

  7. 用node搭建本地服务环境

    const express = require('express'); const path = require('path'); const request = require('request') ...

  8. Webpack 2 视频教程 007 - 配置 WDS 进行浏览器自动刷新

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  9. gulp之压缩css，less转css，浏览器实时刷新【原创】

    gulp入门 gulp浏览器实时同步 首先要下载对应的插件包: gulp-less包:cnpm install gulp-less --save-dev gulp-connect包:cnpm inst ...

随机推荐

  1. redis客户端连接服务端the version of redis server is too low to support this function错误

    redis作为一个内存数据库,使用得当可以大大的提升系统运行的效率,据说能读的速度是110000次/s,写的速度是81000次/s,我们的其中一个系统就用到了这个. 由于之前负责这个的同事离职,只好临 ...

  2. ARM架构

    ARM架构(过去称作进阶精简指令集机器(Advanced RISC Machine),更早称作Acorn RISC Machine)是一个32位元精简指令集(RISC) 中央处理器(processor ...

  3. R+tmcn笔记︱tmcn包的基本内容以及李舰老师R语言大会展示内容摘录

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- tmcn包目前托管在在R-forge 上开发和 ...

  4. Java中的Calendar方法

    /** * @Title:JavaDate.java * @Package:com.yhd.chart.model * @Description:Java中的Calendar总结 * @author: ...

  5. VxWorks下USB驱动总结2

    3:USBD驱动详解 这一部分将要描述USBD(USB Host Driver)的典型应用.例如初始化,client注册,动态连接注册,设备配置,数据传输,同时还探讨了USBD内部设计的关键特性.这部 ...

  6. C# 文件copy和文件删除

    C# 文件copy和文件删除 public bool CopyFile(string SourcePath, string CopyPathFoder) { bool bfg = false; if ...

  7. 小白学爬虫-批量部署Splash负载集群

    整体目录如下: study@study:~/文档/ansible-examples$ tree Splash_Load_balancing_cluster Splash_Load_balancing_ ...

  8. HihoCoder - 1139

    在上一回和上上回里我们知道Nettle在玩<艦これ>,Nettle在整理好舰队之后终于准备出海捞船和敌军交战了.在这个游戏里面,海域是N个战略点(编号1..N)组成,如下图所示其中红色的点 ...

  9. iOS - Core Animation 核心动画

    1.UIView 动画 具体讲解见 iOS - UIView 动画 2.UIImageView 动画 具体讲解见 iOS - UIImageView 动画 3.CADisplayLink 定时器 具体 ...

  10. Gearman研习笔记（1） ------ 官网介绍要点摘录

    之前的项目里使用过消息中间件(公司提供的MQ服务)来做分发,因为MQ是基于消息的,并不是专业的任务分发器,在一些复杂场景上使用起来并不恰当. 后来听组长说了下Gearman(听名字还以为是Ironma ...