配置

webpack-dev-server常用参数配置选项

webpack-dev-server常用参数配置选项:端口、监听目录、host、自动打开浏览器、索引首页、inline模式、热更新、是否压缩、代理等

2018-05-09侠课岛    初级拔高       

前端/前端必修/webpack的dev-server使用 21     0     2390

本文将讲解如何配置webpack-dev-server,主要内容包括: 

  • 在项目中配置webpack-dev-server 

  • webpack-dev-server配置项详解 

在项目中配置webpack-dev-server 

首先在webpack.dev.config.js中设置我们所需要的配置项。因为热加载是在开发环境中所需要的配置,在发布环境并不需要,所以我们把配置写在webpack.dev.config.js开发环境配置文件中。 这里我们设置一下监听的端口号,设置自动在浏览器打开以及热加载这三项,关于配置项的详细信息下面也会介绍到。 

除了像这样在webpack里面定义配置之外,也可以直接使用命令行来设置,例如我想开启inline模式,就在命令行中执行webpack-dev-server --inline 

dev-config.png

然后在package.json中添加一行自定义脚本。 

 "scripts":{
    "watch":"webpack-dev-server --config webpack.dev.config.js"
}

watch是自定义脚本的名字,webpack-dev-server表示开始启动webpack-dev-server服务,后面的--config webpack.dev.config.js表示执行哪个webpack配置文件。默认情况下webpack-dev-server会执行当前执行目录下的webpack.config.js这个文件,但是因为我们之前已经把webpack.config.js分离成三个不同环境的配置文件,所以才需要单独加上这一句话哦~ 点我查看分离webpack编译环境教程 

配置好脚本和webpack-dev-server之后,我们在命令行工具中执行npm run watch,执行完之后,浏览器会自动打开页面,地址是localhost加我们设置的端口号,如下图 :

browser.png

接下来我们再测试一下,修改内容是否能自动刷新,在less文件里面修改文字的颜色,再查看浏览器,可以看到字体的颜色已经自动改变啦,再也不用手动f5是不是很人性化呢~~~ 

update1.png

update2.png

  

webpack-dev-server常见配置项详解 

  • port - 端口号 默认:8080 可以单独设置服务器的端口号,如果默认的8080被占用的情况,这个配置就派的上用场啦。 

  • open - 是否自动开启浏览器,默认:false,当设置为true,开启dev-server服务的时候,会自动在浏览器打开项目。 

  • contentBase - 定义开启服务器的文件夹,默认:当前项目根目录 一般来说不需要设置这个选项,除非你需要dev-server来访问其他的静态文件夹。 

  • useLocalIp - 使用本机ip打开浏览器,默认:false,如果设置为true,当在浏览器打开的时候,地址会从localhost变成你的本机ip。 

  • openPage - 打开浏览器时,服务器显示的页面,默认:无 当没有设置特定的打开页面的时候,服务器会自动加载根目录下面的index.html,也可以根据需求设置为特定的页面~ 

  • inline - 是否开启inline模式 默认:true, webpack-dev-server默认是采用inline模式,在inline模式下,监听的代码会注入到到最后的js文件中,当页面发生变化时自动刷新。当设置为false时,则开启iframe模式,也就是将模板页放在一个iframe中。 我们来测试一下,首先执行npm run watch开启inline模式,在谷歌浏览器调试,可以看到模板是正常的html结构。

inline.png

接着我们把inline设置为false,重新执行npm run watch。再打开调试,可以看到我们的模板被加载到iframe里面去了,同时页面上方还多了一个状态栏,这个状态栏里面是当前build的状态。  

iframe.png

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

21

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?