2019-07-12

语言►nodejs►库►webpack

什么是webpack-dev-server

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/12/%E4%BB%80%E4%B9%88%E6%98%AFwebpack-dev-server/

摘要

本文主要讲述了：

作用
安装
启动
配置

正文

作用

webpack-dev-server提供了一个简易的 web 服务器。它能监听模块文件的变更，重新打包并刷新页面。

安装

1
2
3

#!/usr/bin/env bash

npm install --save-dev webpack-dev-server

启动

1
2
3

#!/usr/bin/env bash

npx webpack serve

注意：npx webpack serve虽然进行了一次打包，但并不会将文件输出。相反，它将文件复制到内存中，可以通过 URL 直接访问。开发者可以访问/webpack-dev-server路由查看内存中的文件列表。

注意：服务器启动之后，webpack就会监听模块文件的变更。一旦监听到变更，就会重新打包并刷新页面。

配置

compress

是否启用 gzip 压缩。

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    compress: true,
  },
};

contentBase

静态文件服务器根目录。

默认值为 CWD。推荐使用绝对路径。

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    contentBase: false, // 关闭静态文件挂载功能
  },
};

示例：

learn_webpack/webpack.config.js

const path = require('path');
module.exports = {
  devServer: {
    contentBase: path.resolve(__dirname, 'public'), // 只挂载一个静态文件或目录
  },
};

示例：

learn_webpack/webpack.config.js

const path = require('path');
module.exports = {
  devServer: {
    contentBase: [
      // 挂载多个静态文件或目录
      path.resolve(__dirname, 'public'),
      path.resolve(__dirname, 'assets'),
    ],
  },
};

host

默认值为localhost。

如果希望 devServer 被局域网内的其他机器访问，指定为0.0.0.0。

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    host: '0.0.0.0',
  },
};

hot

是否启用 webpack 的 HMR 特性。

示例：

learn_webpack/webpack.config.js

const webpack = require('webpack');
module.exports = {
  devServer: {
    hot: true,
  },
};

open

devServer 启动之后是否自动打开浏览器。

若为true，自动打开默认浏览器。

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    open: true,
  },
};

若为浏览器名称，则打开指定的浏览器。

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    open: 'chrome',
  },
};

注意：浏览器名称是平台独立的。Chrome 在 macOS 中叫”Google Chrome”，在 Linux 中叫”google-chrome”，在 Windows 上叫”chrome”。

port

端口号

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    port: 8080,
  },
};

publicPath

构建目录的公共 URL 前缀（其实文件在内存里）。

默认值为/。

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    publicPath: '/',
  },
};

注意：publicPath必须以/开头，以/结尾。

stats

精确控制 devServer 启动时在控制台输出的信息

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    stats: 'errors-only',
  },
};

proxy

反向代理

target

源服务器的 host

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8080,
    proxy: {
      '/api': 'http://127.0.0.1:3000',
    },
  },
};

或

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
      },
    },
  },
};

http://127.0.0.1:8080/api/index.js -> http://127.0.0.1:3000/api/index.js

http://127.0.0.1:8080/foo/api/index.js -> http://127.0.0.1:8080/foo/api/index.js

pathRewrite

反向代理向源服务器发起请求时，修改 URL。

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};

http://127.0.0.1:8080/api/index.js -> http://127.0.0.1:3000/index.js

changeOrigin

反向代理向源服务器发起请求时，是否修改host请求头。

默认为false。

若为true，则反向代理向源服务器发起请求时，host请求头为源服务器的host
若为false，则反向代理向源服务器发起请求时，host请求头为反向代理的host

注意：如果源服务器是基于域名的虚拟主机，必须为true

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8080,
    proxy: {
      '/users': {
        target: 'https://api.github.com/',
        changeOrigin: true,
      },
    },
  },
};

此时https://api.github.com/users?per_page=1&page=1收到的host请求头为api.github.com

context

当多个反向代理的target一致时，可以使用context属性。

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8080,
    proxy: [
      {
        context: ['/auth', '/api'],
        target: 'http://localhost:3000',
      },
    ],
  },
};

http://127.0.0.1:8080/api/index.js -> http://127.0.0.1:3000/api/index.js

http://127.0.0.1:8080/auth/index.js -> http://127.0.0.1:3000/auth/index.js

secure

若源服务器的 HTTPS 证书是无效的，设为false可以禁用证书校验

示例：

learn_webpack/webpack.config.js

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8080,
    proxy: {
      '/api': {
        target: 'https://localhost/',
        secure: false,
      },
    },
  },
};