[Webpack并不难]使用教程（四）--- devServer

Anonymous1 发布于2019-08-22 11:15 / 356人阅读

摘要：使用教程一，，，使用教程二使用教程三我的版本是官方的文档在开发模式下，提供虚拟服务器，让我们进行开发和调试。文档如果为，开启虚拟服务器时，为你的代码进行压缩。的警告和错误是不输出到终端的。而则作用于请求路径上的。不想启用也可以填。

使用教程（一）--- entry，devtool，output，resolve
使用教程（二）--- module.loaders
使用教程（三）--- plugins

我的 Webpack 版本是 3.10.0

DevServer （官方的文档）

在开发模式下，DevServer 提供虚拟服务器，让我们进行开发和调试。

而且提供实时重新加载。简直美滋滋。大大减少开发时间。

它不是 webpack 内置插件哦，要安装！！！

// 安装
npm install webpack-dev-server --save-dev

// 在 package.json 配置下，方便使用。
"scripts": {
    "dev": "webpack-dev-server" // 运行命令会自动在node_modules文件夹找 webapck-dev-server模块。
 }

// webpack.config.js 配置一下 devServer
devServer: {
    clientLogLevel: "warning",
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: "localhost",
    port: 8080
  }

如果没在 package.json 配置且还是局部安装，你就要在命令行输入 node_modules/.bin/webpack-dev-server。若你 package.json 配置好了，在命令行输入npm run dev。

下面说说 devServer 配置中每一项有什么用。

Hot （文档）

热模块更新作用。即修改或模块后，保存会自动更新，页面不用刷新呈现最新的效果。

这不是和 webpack.HotModuleReplacementPlugin （HMR） 这个插件不是一样功能吗？是的，不过请注意了，HMR 这个插件是真正实现热模块更新的。而 devServer 里配置了 hot: true , webpack会自动添加 HMR 插件。所以模块热更新最终还是 HMR 这个插件起的作用。

host （文档）

写主机名的。默认 localhost

prot （文档）

端口号。默认 8080

historyApiFallback （文档）

如果为 true ，页面出错不会弹出 404 页面。

如果为 {...} , 看看一般里面有什么。

rewrites

rewrites: [
    { from: /^/subpage/, to: "/views/subpage.html" },
    {
      from: /^/helloWorld/.*$/,
      to: function() {
          return "/views/hello_world.html;
      }
    }
]
// 从代码可以看出 url 匹配正则，匹配成功就到某个页面。
// 并不建议将路由写在这，一般 historyApiFallback: true 就行了。

verbose：如果 true ，则激活日志记录。

disableDotRule：禁止 url 带小数点 . 。

compress (文档)

如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。

contentBase （文档）

你要提供哪里的内容给虚拟服务器用。这里最好填 绝对路径。

// 单目录
contentBase: path.join(__dirname, "public")

// 多目录
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]

默认情况下，它将使用您当前的工作目录来提供内容。

Open （文档）

true，则自动打开浏览器。

overlay (文档)

如果为 true ，在浏览器上全屏显示编译的errors或warnings。默认 false （关闭）

如果你只想看 error ，不想看 warning。

overlay：{
    errors：true，
    warnings：false
}

quiet （文档）

true，则终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的。

publicPath （文档）

配置了 publicPath后， url = "主机名" + "publicPath配置的" +
"原来的url.path"。这个其实与 output.publicPath 用法大同小异。

output.publicPath 是作用于 js, css, img 。而 devServer.publicPath 则作用于请求路径上的。

// devServer.publicPath
publicPath: "/assets/"

// 原本路径 --> 变换后的路径
http://localhost:8080/app.js --> http://localhost:8080/assets/app.js

proxy (文档)

当您有一个多带带的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。看例子好理解。

  proxy: {
    "/proxy": {
        target: "http://your_api_server.com",
        changeOrigin: true,
        pathRewrite: {
            "^/proxy": ""
        }
  }

假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list

"/proxy"：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。

changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。

pathRewrite：重写路径。匹配 /proxy ，然后变为"" ，那么 url 最终为 http：//your_api_server.com/user/list 。

watchOptions （文档）

一组自定义的监听模式，用来监听文件是否被改动过。

watchOptions: {
  aggregateTimeout: 300,
  poll: 1000，
  ignored: /node_modules/
}

aggregateTimeout：一旦第一个文件改变，在重建之前添加一个延迟。填以毫秒为单位的数字。

ignored：观察许多文件系统会导致大量的CPU或内存使用量。可以排除一个巨大的文件夹。

poll：填以毫秒为单位的数字。每隔（你设定的）多少时间查一下有没有文件改动过。不想启用也可以填false。

~~完结，希望大家喜欢！~~ 并未完结，敬请期待！

超融合服务器 idc机房托管 webpack教程 webpack使用 webpack4教程 webpack 使用公用cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92056.html

[webpack并不难]总结

摘要：刚写的时候，心里有很多小声音写不好的万一写错，误导别人怎么办等等。最重要还是感谢你的支持。接下来还会写些有趣的东西带给大家。这个教程就此完结咯，两周前的一个念头也实现了。刚写的时候，心里有很多小声音：写不好的 , 万一写错，误导别人怎么办等等。万事开头难，写着写着就发现和之前看到的一句话很贴切，输入一些东西很简单的，但你要输出确实比较难。使用教程（一）--- entry，...

forrest23 2019-08-22 11:18 评论0 收藏0
[Webpack并不难]把它当人物养成游戏吧。

摘要：发觉其实真的不难，毕竟它是一个工具，如果用起来都不顺手，那为什么那么多人用，是不是。我觉得可以把当成人物养成游戏来玩，哦不，来学。听说把宝石放进这工具就能自动更新打包。公司最近弄来了一些未来的文言文，你把它翻译成现代文吧。前言这段可以跳过看下面的。本来，这个教程想完结的了。但回头看自己写的，感觉就像写明了什么意思，具体怎么使用都没说明白，而且让人看得会有点乏味吧。我也是刚开始...

andot 2019-08-22 11:17 评论0 收藏0
webpack4详细教程，从无到有搭建react脚手架（一）

摘要：是一个现代应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师切图仔，非常有必要学习。官网的文档非常的棒，中文文档也非常给力，可以媲美的文档。建议先看概念篇章，再看指南，然后看和配置总览。 webpack 是一个现代 JavaScript 应用程序的静态模块打包器，前端模块化的基础。作为一个前端工程师（切图仔），非常有必要学习。 showImg(https://segment...

zhkai 2019-08-23 18:35 评论0 收藏0
[Webpack并不难]使用教程（三）--- plugins

摘要：使用教程一，，，使用教程二版本官方的文档上一篇讲到的是被用来转换某些类型的模块，它则可以用来做更广泛的任务。可看作绑定事件，打包时会触发事件。它的作用是定义全局常量，是常量。为，启用两步之间的延迟。请注意，规范建议始终使用引号。使用教程（一）--- entry，devtool，output，resolve使用教程（二）--- module.loadersWebpack版本 3.10...

Youngs 2019-08-22 13:40 评论0 收藏0
webpack4 系列教程(十五)：开发模式与webpack-dev-server

摘要：作者按因为教程所示图片使用的是仓库图片，网速过慢的朋友请移步系列教程十五开发模式与原文地址。而开发模式就是指定为。在非开发模式下，需要关闭此选项，以减小打包体积。在单页应用中，任何响应直接被替代为。作者按：因为教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步《webpack4 系列教程(十五)：开发模式与 webpack-dev-server》原文地址。更欢迎来我的...

zengdongbao 2019-08-23 12:27 评论0 收藏0