[前言]:因为最近在vue2.0的时候用到了webpack的externals，才发现我之前都只是用webpack做一些搭建完项目后的“收尾工作”——即打包，而没有把它纳入到项目开发的“主体过程”中来，真是“物不尽其用”。于是就有了我今天的这篇学习文章：利用webpack-dev-server搭建一个webpack的服务器
参考资料：
webpack-dev-server的github地址：https://github.com/webpack/webpack-dev-server
webpack1官方文档http://webpack.github.io/docs/webpack-dev-server.html（推荐看2的文档）
webpack2官方文档https://webpack.js.org/configuration/dev-server/#devserver（推荐读这个）
 
 
 提纲：
1.复习webpack的知识
2.详解webpack-dev-server的配置属性
3.webpack-dev-server的自动刷新和模块热替换机制
4.webpack下配置服务器的三种方式
 
复习一下webpack的知识
 
我将目录结构简化之后长这样：
 
我的webpack.config.js:
var webpack = require('webpack')

var path =require('path')

module.exports = {

entry:{

   app:path.join(__dirname,'src','index.js')

},

output:{

   filename:'bundle.js',

   path:path.join(__dirname,'dist')

  }

}

我的src/index.js:

require('./a.js')

require('./b.js')

console.log('我是index.js')
我的src/a.js:
console.log('我是a.js')
我的src/b.js:
console.log('我是b.js')
我的dist/index.html:
/*其他部分省略*/

<body>

  <script src="./bundle.js"></script>

</body>
当我们在终端运行“webpack”命令后,目录变为：

一张图复习一下webpack的机制：

OK，下面，让我们开始搭建一个服务器吧：
 
怎么用最简单的方式搭建一个服务器？
 
1.你需要一个安装一个模块
在终端中进入项目目录下，敲下npm install webpack-dev-server --save-dev回车
2.在终端运行一段命令：
node_modules/.bin/webpack-dev-server(网上有的说直接输webpack-dev-server那是错的)
 
成功！输出的是这一段信息：

然后进入默认的localhost:8080页面：
服务器的根目录就是我们工程的目录
 
到这里，我们要做的第一步就成功啦！
 
进入dist后，我们发现报了这样一段错误：
what?没有找到bundle.js?
 
所以我们要在webpack.config.js里写一下配置：
module.exports = {

/*这里省略entry和output，参照上面写的内容*/

  devServer: {

       contentBase: path.join(__dirname, "dist")

   }

}
保存，后打开页面看控制台，报错已经消失了！正确打印了被打包的文件内容：
 

详解webpack-dev-server的配置属性 

1.devServer.contentBase
contentBase是我们今天要讲的第一个webpack-dev-server的配置属性，那么，contentBase做了什么事情呢？——它指定了服务器资源的根目录，如果不写入contentBase的值，那么contentBase默认是项目的目录。
在上面例子中产生错误和后来解决错误的原因：
产生错误：因为bundle.js被"放在了"我们的项目根目录里，在dist/html里<script src="./bundle.js"></script>此时显然不能根据路径找到bundle.js
解决错误：通过配置contentBase: path.join(__dirname, "dist")将bundle.js"放在了"dist目录下，此时bundle.js和dist/index.html位于同一目录下，通过 src="./bundle.js"自然就找到bundle.js了
 
webpack打包和webpack-dev-server开启服务的区别——
webpack输出真实的文件，而webpack-dev-server输出的文件只存在于内存中,不输出真实的文件！（注意下面两张图的区别）
 
webpack:当我们在终端运行"webpack"后：

webpack-dev-server:当我们在终端运行"node_modules/.bin/webpack-dev-server后：
这也就是我在上面的阐述中将bundle.js"放在了"加上双引号的原因
 
2.devServer.port
port配置属性指定了开启服务的端口号：
devServer: {

   port:7000

}
设置端口号为7000:
运行：node_modules/.bin/webpack-dev-server
这个时候就不是默认的8080的端口了，而是我们设置的7000
 
3.devServer.host
host设置的是服务器的主机号：
修改配置为：
devServer: {

   contentBase: path.join(__dirname, "dist"),

   port:7000,

   host:'0.0.0.0'

}
此时localhost:7000和0.0.0.0:7000都能访问成功
 
4.devServer.historyApiFallback
在文档里面说的很清楚，这个配置属性是用来应对返回404页面时定向到特定页面用的（the index.html page will likely have to be served in place of any 404 responses)
在dist目录下新增一个HTML页面：
/*剩下的都是很常规的HTML内容，故省略*/

<p>这里是404界面</p>
 
我们把webpack.config.js修改如下：
module.exports = {

/*这里省略entry和output，参照上面写的内容*/

devServer: {

contentBase: path.join(__dirname, "dist"),

historyApiFallback:{

   rewrites:[

      {from:/./,to:'/404.html'}

   ]

  }

 }

}
 
打开页面，输入一个不存在的路由地址：

 
5.devServer.overlay
这个配置属性用来在编译出错的时候，在浏览器页面上显示错误，默认是false，可设置为true
首先我们人为制造一个编译错误：在我们尚未配置babel loader的项目里使用ES6写法：
在src/index.js里写入“const a”
在shell里提示编译错误：
 
但在浏览器里没有提示：
所以我们把webpack.config.js修改为：
module.exports = {

     /*这里省略entry和output，参照上面写的内容*/

   devServer: {

       contentBase: path.join(__dirname, "dist"),

       overlay: true

   }

}
 
再重新运行node_modules/.bin/webpack-dev-server，浏览器上把错误显示出来了

6.devServer.stats（字符串）
 
这个配置属性用来控制编译的时候shell上的输出内容，我们没有设置devServer.stats时候编译输出是这样子的：
（其中看起来有许多看似不重要的文件也被打印出来了）

stats: "errors-only"表示只打印错误：
我们把配置改成：
devServer: {

   contentBase: path.join(__dirname, "dist"),

   stats: "errors-only"

}
 
因为只有错误才被打印，所以，大多数信息都略过了
除此之外还有"minimal"，"normal"，"verbose"，这里不多加赘述
 
7.devServer.quiet
当这个配置属性和devServer.stats属于同一类型的配置属性
当它被设置为true的时候，控制台只输出第一次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告
来做个对比吧：
quiet：false（默认）：
第一次编译：
第二次编译（当你保存的时候）

quiet:true

第一次编译同上
第二次编译什么都不输出
【吐槽】这样看的话感觉这个配置好像只有负面作用呢.....
 
8.devServer.compress
这是一个布尔型的值，当它被设置为true的时候对所有的服务器资源采用gzip压缩
采用gzip压缩的优点和缺点：
优点：对JS，CSS资源的压缩率很高，可以极大得提高文件传输的速率，从而提升web性能
缺点：服务端要对文件进行压缩，而客户端要进行解压，增加了两边的负载
 
9.devServer.hot和devServer.inline
在这之前，首先要说一下的是webpack-dev-server的自动刷新和模块热替换机制
 
webpack-dev-server的自动刷新和模块热替换机制
 
这两个机制是紧紧联系在一起的
 
从外部角度看——自动刷新
当我们对业务代码做了一些修改然后保存后（command+s），页面会自动刷新，我们所做的修改会直接同步到页面上，而不需要我们刷新页面，或重新开启服务
（The webpack-dev-server supports multiple modes to automatically refresh the page）
 
从内部角度看——模块热替换
在热替换（HMR）机制里，不是重载整个页面，HMR程序会只加载被更新的那一部分模块，然后将其注入到运行中的APP中
（In Hot Module Replacement, the bundle is notified that a change happened. Rather than a full page reload, a Hot Module Replacement runtime could then load the updated modules and inject them into a running app.）
 
webpack-dev-server有两种模式可以实现自动刷新和模块热替换机制
1. Iframe mode(默认,无需配置)
页面被嵌入在一个iframe里面，并且在模块变化的时候重载页面
2.inline mode（需配置）添加到bundle.js中
当刷新页面的时候，一个小型的客户端被添加到webpack.config.js的入口文件中
例如在我们的例子中，在使用inline mode的热替换后，相当于入口文件从
entry:{

    app:path.join(__dirname,'src','index.js')

}
变成了：
entry:{

    app:[path.join(__dirname,'src','index.js'),

             'webpack-dev-server/client?http://localhost:8080/'

          ]

}
从一个入口变成了两个入口，并实现刷新
 
那怎么才能inline mode模式的刷新呢？
 
你需要做这些：
1在配置中写入devServer.hot：true和devServer.inline：true
2增加一个插件配置webpack.HotModuleReplacementPlugin()
 
例如：
var webpack = require('webpack')

module.exports = {

   /*省略entry ,output等内容*/

   plugins:[

        new webpack.HotModuleReplacementPlugin()

    ],

   devServer: {

        inline:true,

        hot:true

    }

}
 
打开页面：
如果有上面两行输出则表明你已经配置成功
 
现在还有一个问题，那就是每次直接输入node_modules/.bin/webpack-dev-server来启动服务器对我们来说简直就是莫大的痛苦，那么怎么对这一过程进行简化呢？
答案：把这个运行脚本写到package.json里就行了！
 
这里我把我的package.json写成：
{

   "name": "webpackTest2",

   "dependencies": {},

   "devDependencies": {},

   "scripts": {

       "start": "node_modules/.bin/webpack-dev-server"

     }

}
 
在终端运行npm start:
运行成功！
 
配置服务的三种方式：
 
1在webpack.config.js输出对象中的devServer属性中写配置（也就是我们上述所有例子的做法）
 
2写在package.json中，写在node 命令对应的脚本中，例如我们可以写成：
"scripts": {
"start": "node_modules/.bin/webpack-dev-server --port 8000 --inline true "
}
(但这显然并不是一个值得推荐的方式)
 
3使用纯node的API实现，下面是一个官方给的例子
var config = require("./webpack.config.js");

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");

var compiler = webpack(config);

var server = new WebpackDevServer(compiler, {

       /*我们写入配置的地方*/

});

server.listen(8080);

搭建一个webpack微服务器的更多相关文章

  1. 搭建一个Flv视频播放服务器

    搭建一个Flv视频播放服务器 热度 15已有 11511 次阅读2009-11-2 22:27 |关键词:服务器 视频 flv 播放 文档 错漏 经过一天的努力,查了好多资料,终于搞定了Flv视频服务 ...

  2. 【日记】搭建一个node本地服务器

    用node搭建一个本地http服务器.首先了解htpp服务器原理 HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端.HTTP协议采用了请求/响应模型 ...

  3. 用nodejs搭建一个简单的服务器

    使用nodejs搭建一个简单的服务器 nodejs优点:性能高(读写文件) 数据操作能力强 官网:www.nodejs.org 验证是否安装成功:cmd命令行中输入node -v 如果显示版本号表示安 ...

  4. 初学Node（六）搭建一个简单的服务器

    搭建一个简单的服务器 通过下面的代码可以搭建一个简单的服务器: var http = require("http"); http.createServer(function(req ...

  5. Anroid搭建一个局域网Web服务器

    前言   很多开发者看到这个标题表示很怪异,Android怎么可能搭建服务器呢?根本用不到呀,这个项目毫无价值.我表示很理解这一类的开发者,毕竟每个人的经验经历都是有限的. 必须要说说我们的用处(需要 ...

  6. Node：使用express搭建一个简易的服务器

    ①安装node环境 在node.js官网下载LTS长期支持版本,然后傻瓜式安装 ②查看是否安装成功 打开cmd终端,输入node -v 有版本号,则安装成功.再输入npm -v 有版本号,则npm也安 ...

  7. netty系列之:来,手把手教你使用netty搭建一个DNS tcp服务器

    目录 简介 搭建netty服务器 DNS服务器的消息处理 DNS客户端消息请求 总结 简介 在前面的文章中,我们提到了使用netty构建tcp和udp的客户端向已经公布的DNS服务器进行域名请求服务. ...

  8. 基于jenkins搭建一个持续集成服务器

    1 引言 1.1 编写目的 指导质量管理部,业务测试组同事进行Jenkins环境部署,通过Jenkins解决测试环境不可控,开发测试环境不一致等问题. 1.2 使用对象 质量管理部.基础研发部,集成部 ...

  9. 手动搭建一个webpack+react笔记

    { "name": "lottery", "version": "1.0.0", "description&q ...

随机推荐

  1. Kafka(3)--kafka消息的存储及Partition副本原理

    消息的存储原理: 消息的文件存储机制: 前面我们知道了一个 topic 的多个 partition 在物理磁盘上的保存路径,那么我们再来分析日志的存储方式.通过 [root@localhost ~]# ...

  2. 1_Python历史及入门

    前提:简述CPU 内存 硬盘 操作系统 应用程序CPU:计算机的运算核心和控制核心,好像人类的”大脑“内存:负责数据与CPU直接数据交流处理,将临时数据和应用程序加载到内存,然后在交由CPU处理. 造 ...

  3. 手机控制台调试(需PC端协助)

    工具需求: 1.PC 2.手机(暂时只测试安卓,ios可能是在证书上有区别?) 3.以上两个工具在同一局域网下 步骤:  一 ,PC端登录nodejs官网,选择并下载安装 next,下一步下一步即可( ...

  4. setCapture 使用方法

    setCapture 可以捕获到 移动到浏览器外的鼠标事件. 例如拖动过程中,即使鼠标移动到了浏览器外,拖动程序依然可以执行! 作用就是把 把鼠标事件 捕获到 当前文档指定的对象! setCaptur ...

  5. iframe父页面获取子页面元素方法

    1.window.frames["iframe的id"].contentDocument.getElementsByClassName("mycontainer" ...

  6. 云笔记项目-Spring事务学习-传播NESTED

    接下来测试事务传播属性NESTED Service层 Service层方法事务传播属性都设置为NESTED. LayerT层代码 package LayerT; import javax.annota ...

  7. win10卸载IE11后从新安装

    win10卸载IE11后想要从新安装,运气不好的话各种坑安装不上,运气好就不说了.这里笔者在知乎看到一种方法,亲测可用,记录如下: 设置--应用--应用和功能--管理可选功能--添加功能--Inter ...

  8. mysql批量update更新，mybatis中批量更新操作

    在日常开发中,有时候会遇到批量更新操作,这时候最普通的写法就是循环遍历,然后一条一条地进行update操作.但是不管是在服务端进行遍历,还是在sql代码中进行遍历,都很耗费资源,而且性能比较差,容易造 ...

  9. d3.js svg中 g 标签问题一览

    svg 中的g标签, 算是比较特殊 1 没有x y属性 2 没有width height 属性 3 不能fill 4 .... g标签基本只管分组问题, 其他功能一概不提供 要解决这些问题, 直接在g ...

  10. python--第十七天总结（Django）

    基本配置 一.创建django程序 终端命令:django-admin startproject sitename IDE创建Django程序时,本质上都是自动执行上述命令 其他常用命令: pytho ...