webpack基本配置详解_vue基础知识

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

devServer

可以用来提高开发效率，它提供一下配置可以改变 devServer 的默认行为。除了在配置问题通过 devServer 传入参数外，还可以通过命令行参数传入。注意：只用在通过 devServer 去启动 webpack 时，配置文件里 devServer 才会生效，因为这些参数所对应的功能都是 devServer 提供的，webpack 本身并不认识 devServer 配置项。

• hot

devServer.hot 配置是否启用模块热替换功能。devServer 默认行为是在发现源代码被更新后会通过自动刷新整个页面来做到预览，开启模块热替换功能后，在不刷新整个页面的情况下通过用新模块替换老模块来实现实时预览。

• inline

devServer 的实时预览功能依赖注入到页面里的代理客户端去接受来自 devServer 的命令和负责刷新网页的工作。devServer.inline 用于配置是否自动注入这个代理客户端到将运行在页面的 Chunk 里面，默认是自动注入。devServer 会根据你是否开启 inline 来调整它的自动刷新策略：

1. 如果开启inline， DevServer会在构建完变化后的代码时通过代理客户端控制网页刷新。
2. 如果关闭inline， DevServer将无法直接控制要开发的网页。这时它会通过iframe的方式去运行要开发的网页，当构建完变化后的代码通过刷新iframe来实现实时预览。

Jetbrains全家桶1年46，售后保障稳定

• historyApiFallback

devServer.historyApiFallback 用于方便的开发使用 HTML5 HistoryAPI 的单页应用。这类单页应用要求服务器针对任何命中的路由都返回一个对应的 HTML 文件，例如在访问 http://localhost/user 和 http://localhost/home 时都返回index.html文件，浏览器端的JavaScript代码会从URL里解析出当前的状态，显示对应的界面。

这会导致任何请求都会返回index.html文件，这智能用于只有一个HTML文件的应用。

如果应用由多个单页应用组成，这时就需要DevServer根据不同的请求返回不同的HTML文件：配置如下：

historyApiFallback: {
    //使用正则匹配命中路由
    rewrites: [
        {from: /^\/user/, to: '/user.html'},
        {from: /^\/game/, to: '/game.html'},
        {from: /./, to: '/index.html'}
    ]
}

• contentBase

devServer.contentBase 配置 devServer HTTP 服务器的文件根目录。默认情况下为当前执行目录，所以一般不必设置它，除非有额外的文件需要被 devServer 服务。例如，你想要把项目根目录下的 public 目录设置成 devServer 服务器的文件根目录：

devServer: {
    contentBase: path.join(__dirname, 'public')
}

• headers

devServer.headers 配置项可以在 HTTP 响应中注入一些 HTTP 响应头，使用如下：

devServer： {
  headers: {
    'Access-Control-Allow-Origin': '*',
  }
}

• host

devServer.host 配置项用于配置 devServer 服务器监听的地址。如果你想要局域网中其他设备访问你本地的服务，你可以在启动的时候带上 — host 0.0.0.0 host 的默认值是 127.0.0.1,即只有本地可以访问 devServer 的 HTTP 服务。

• port

devServer.port 配置项用于配置 devServer 服务监听的端口，默认使用 8080 端口。如果 8080 端口已经被其他程序占有就使用 8081。

• allowedHosts

devServer.allowedHosts 配置一个白名单列表，只有 HTTP 请求的 HOST 在列表里才正常返回，使用如下：

allowedHosts: [
  //匹配单个域名
  'host.com',
  'sub.host.com',
  / host2.com 和所有的子域名 *.host2.com 都将匹配
  '.host.com'
]

• disableHostCheck

devServer.disableHostCheck 配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 host 检查。devServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。它同样用于搭配 –host 0.0.0.0 使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

• https

devServer 默认使用 HTTP 协议服务，它也能通过 HTTPS 协议服务。有些情况下你必须使用 HTTPS，例如 HTTP2 和 Service Worker 就必须运行在 HTTPS 之上。要切换成 HTTPS 服务，最简单的方式是：

devServer:{
  https: true
}

devServer 会自动的为你生成一份 HTTPS 证书。

devServer:{
  https: {
    key: fs.readFileSync('path/to/server.key'),
    cert: fs.readFileSync('path/to/server.crt'),
    ca: fs.readFileSync('path/to/ca.pem')
  }
}

• clientLogLevel

devServer.clientLogLevel 配置在客户端的日志等级，这会影响到你在浏览器开发者工具控制台看到的日志内容。clientLogLevel 是枚举类型，可取如下之一的值 none | error | warning | info。默认为 info 级别，即输出所有类型的日志，设置成 none 可以不输出任何日志。

• compress

devServer.compress 配置是否启用 gzip 压缩。 Boolean 类型，默认为 false。

• open

devServer.open 用于在 devServer 启动且第一次构建完时，自动用你系统上默认的浏览器去打开要开发的网页，同时还提供 devServer.openPage 配置项用于打开指定 URL 的网页。

• disableHostCheck

将当此项配置设置为 true 时，将会跳过主机检查。这里不推荐使用，因为不检查主机的应用容易收到 DNS 重新绑定攻击。

• overlay

devServer.overlay 出现编译器错误或警告时，在浏览器中显示全屏覆盖。除了设置为 Boolean 类型之外，我们还可以传入对象进行配置。

devServer: {
  overlay: {
    warnings: false,
    errors: true,
  },
},

• proxy

当拥有单独的 API 早期开发服务器并且希望在同一域上发送 API 请求时，代理某些 URL 可能会很有用。使用它来启用代理，target 为预设的访问地址。

默认情况下，代理时会保留主机头的来源，可以将 changeOrigin 设置为 true 已覆盖此行为。

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      changeOrigin: true,
    },
  },
},

更多 webpack 的信息，请查看：webpack 官网。