Webpack开发服务器配置

Rsquo
439 阅读3分钟

1. webpack-dev-server

  • 安装webpack-dev-server

    • npm install webpack-dev-server -D
    • 修改配置文件，启动时加上serve参数："serve": "webpack serve"

  • webpack-dev-server 在编译之后不会写入到任何输出文件，而是将 bundle 文件保留在内存中：

    • 事实上webpack-dev-server使用了一个库叫memfs（memory-fs webpack自己写的）

2. 其他配置信息

  • static配置
    • devServer中static对于直接访问打包后的资源其实并没有太大的作用，它的主要作用是如果我们打包后的资源，又依赖于其他的一些资源，那么就需要指定从哪里来查找这个内容：
      • 比如在index.html中，我们需要依赖一个 abc.js 文件，这个文件我们存放在 public文件中
      • 在index.html中，通过 <script src="./content/abc.js"></script>这样引入的资源，浏览器是无法通过相对路径找到这个文件夹的
      • 这个时候就需要设置static属性了，并且引入路径也要做修改<script src="./abc.js"></script>
    // webpack.config.js
module.exports = {
  devServer: {
    // 此处写入依赖静态资源的文件夹
    static: ['content'],
  },
}
  • 额外配置:

    • hotOnly：是当代码编译失败时，是否刷新整个页面：

      • 默认情况下当代码编译失败修复后，会重新刷新整个页面
      • 如果不希望重新刷新整个页面，可以设置hotOnly为true

    • host设置主机地址：

      • 默认值是localhost；
      • 如果希望其他地方也可以访问，可以设置为 0.0.0.0；

    • localhost 和 0.0.0.0 的区别：

      • localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1
      • 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收
        • 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层
        • 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的
        • 比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的
      • 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序
        • 比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的

    • port：设置监听的端口，默认情况下是8080

    • open是否打开浏览器：

      • 默认值是false，设置为true会打开浏览器

    • compress: 是否为静态文件开启gzip compression：

      • 默认值是false，可以设置为true

      image.png

3. proxy的配置

  • proxy是开发中非常常用的一个配置选项，它的目的设置代理来解决跨域访问的问题：

    • 比如我们的一个api请求是 http://localhost:8888，但是本地启动服务器的域名是 http://localhost:9000，这个时候发送网络请求就会出现跨域的问题
    • 那么我们可以将请求先发送到一个代理服务器，代理服务器和API服务器没有跨域的问题，就可以解决我们的跨域问题了

  • 可以进行如下的设置：

    • target：表示的是代理到的目标地址，比如 /api/users/list会被代理到 http://localhost:9000/api/users/list
    • pathRewrite：默认情况下，我们的 /api 也会被写入到URL中，如果希望删除，可以使用pathRewrite
    • changeOrigin：它表示是否更新代理后请求的headers中host地址
      • 如果设置为true，服务器获取的请求的headers中host地址为代理的target的地址

4. historyApiFallback

  • historyApiFallback是开发中一个非常常见的属性，它主要的作用是解决SPA页面在路由跳转之后，进行页面刷新时，返回404的错误。

  • boolean值：默认是false

    • 如果设置为true，那么在刷新时，返回404错误时，会自动返回 index.html 的内容

  • object类型的值，可以配置rewrites属性：

    • 可以配置from来匹配路径，决定要跳转到哪一个页面
module.exports = {
  devServer: {
    static: ['content'],
    // hot: true,
    // host: 0.0.0.0,
    port: 8888,
    open: true,
    compress: true,
    proxy: {
      '/api': {
        target: 'http://localhost:9000',
        pathRewrite: {
          '^/api': ''
        },
        changeOrigin: true
      }
    },
    historyApiFallback: true
  },
}
avatar
文章
阅读
粉丝