详解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
    }
}

打开页面:

如果有上面两行输出则表明你已经配置成功

原文地址:https://www.cnblogs.com/jkr666666/p/11067270.html

时间: 2024-11-05 20:49:39

详解webpack-dev-server的配置属性的相关文章

笔记:配置 webpack dev server

笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 启动 webpack-dev-server 原文地址:https://www.cnblogs.com/F4NNIU/p/webpack-dev-server.html

Kafka详解之二、如何配置Kafka集群

Kafka集群配置比较简单,为了更好的让大家理解,在这里要分别介绍下面三种配置 单节点:一个broker的集群 单节点:多个broker的集群 多节点:多broker集群 一.单节点单broker实例的配置 1.首先启动zookeeper服务 Kafka本身提供了启动zookeeper的脚本(在kafka/bin/目录下)和zookeeper配置文件(在kafka/config/目录下),首先进入Kafka的主目录(可通过 whereis kafka命令查找到): [[email protect

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"

详解 Windows 下 Eclipse CDT 配置 C/C++ 编译环境

其实 windows 下,C.C++ IDE 也不少,但许多IDE的 UI 和用户体验基本都停留在上个世纪,除了 eclipse CDT 和 visual studio,但后者现在是个巨无霸,安装文件都 3 个多G,而且这货安装容易删除难,但 eclipse CDT 就不一样了,熟悉 java eclipse 的同学能快速适应~ 1.Eclipse及CDT的安装 到Eclipse的官方网站http://www.eclipse.org上下载Eclipse. 离线安装CDT.CDT的全称是C/C++

[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 server enables you to visit the server from any device using the host option. This lesson walks you through accessing webpack dev server using an iPhon Ch

(转)web.config详解之在文件中配置网站默认页面

在<configuration></configuration>中添加下面的配置 <system.webServer>        <defaultDocument>            <files>                <clear />                <add value="index.aspx" />                <add value=&qu

详解Springboot中自定义SpringMVC配置

详解Springboot中自定义SpringMVC配置 WebMvcConfigurer接口 ? 这个接口可以自定义拦截器,例如跨域设置.类型转化器等等.可以说此接口为开发者提前想到了很多拦截层面的需求,方便开发者自由选择使用.由于Spring5.0废弃了WebMvcConfigurerAdapter,所以WebMvcConfigurer继承了WebMvcConfigurerAdapter大部分内容. WebMvcConfigurer接口中的方法 举例1:configurePathMatch配置

详解Tomcat 配置文件server.xml

前言 Tomcat隶属于Apache基金会,是开源的轻量级Web应用服务器,使用非常广泛.server.xml是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的一个组件:通过对xml文件中元素的配置,可以实现对Tomcat中各个组件的控制.因此,学习server.xml文件的配置,对于了解和使用Tomcat至关重要. 本文将通过实例,介绍server.xml中各个组件的配置,并详细说明Tomcat各个核心组件的作用以及各个组件之间的相互关系. 说明:由于s

rysnc详解以及rysnc后台服务配置

rysnc是linux系统下数据备份工具之一.字面理解就是remote sync(远程同步).备份数据是多数系统管理员的必备日常工作.不仅仅要备份本地文件,还要对web服务器或者远端数据进行备份,这就需要我们熟练的掌握rysnc工具,rysnc不仅仅能对不同位置的文件和目录进行同步,还可以差异计算,压缩传输文件来最小化数据传输,和cp命令相比,rysnc的优势在于搞笑的差异算法.并且,rysnc还支持网络数据传输,在复制文件的同时,会把源端与目的端的文件进行比较,只有当文件不一样的时候在进行复制

Apache的配置详解,最好的Apache配置文档

http://blog.csdn.net/apple_llb/article/details/50253889 Apache的配置由httpd.conf文件配置,因此下面的配置指令都是在httpd.conf文件中修改. 主站点的配置(基本配置) (1) 基本配置: ServerRoot "/mnt/software/apache2" #你的apache软件安装的位置.其它指定的目录如果没有指定绝对路径,则目录是相对于该目录. PidFile logs/httpd.pid #第一个htt