webpack-dev-server 使用教程

webpack-dev-server是我们在开发nodejs必须要掌握的工具，它可以帮助我们快速搭建开发环境。官网介绍如下

Use webpack with a development server that provides live reloading. This should be used for development only. It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.

简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它可以为wepack打包生成的资源文件提供Web服务

安装

代码语言：javascript复制

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

注意：虽然你可以全局安装webpack-dev-server，但我们建议在本地安装它

使用

官方推荐两种主流的使用方式

CLI

最简单的办法就是通过webpack CLI，在webpack.config.js文件目录下执行：

代码语言：javascript复制

$ npx webpack serve

注意： 1、你需要预装npx确保你以上命令执行新成果，关于npx介绍请参考此篇文章 2、请注意你的webpack版本，v5版本才支持webpack serve

NPM Scripts

NPM package.json脚本是一种方便且有效的方法，可以运行本地安装的二进制文件，而不必担心它们的完整目录。示例如下：

代码语言：javascript复制

{
  "scripts": {
    "serve": "webpack serve"
  }
}

定义好脚本后在控制台或终端运行：

代码语言：javascript复制

$ npm run serve

NPM会自动为你引用node_modules中的二进制文件，并执行文件或命令。

结果

这两种方法都将启动一个服务器实例并开始在端口 8080 上侦听来自localhost的连接

webpack-dev-server默认配置为支持在服务器运行时编辑代码时实时重新加载文件

常用配置

以下只介绍工作中的常用配置，有关更多用例和选项，请参阅官方文档

端口配置

1、webpack配置项配置

代码语言：javascript复制

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

2、CLI命令启动配置

代码语言：javascript复制

$ npx webpack serve --port 8080

自动刷新

webpack-dev-server有两种模式支持自动刷新——iframe模式和inline模式。

在iframe模式下：页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载；在inline模式下：一个小型的webpack-dev-server客户端会作为入口文件打包，这个客户端会在后端代码改变的时候刷新页面。

1、iframe模式

使用iframe模式无需额外的配置，只需在浏览器输入：http://localhost:8080/webpack-dev-server/index.html

2、CLI命令启动配置

代码语言：javascript复制

webpack-dev-server --inline

反向代理

与Nginx类似，webpack-dev-server也是通过url正则匹配的方式进行url代理配置，常用配置参考如下：

代码语言：javascript复制

// webpack.config.js
module.exports = {
    // ...
    devServer: {
        hot: true,
        contentBase: false, // since we use CopyWebpackPlugin.
        compress: true,
        host: 'localhost',
        port: 8080,
        proxy: {
            "/api": {
                target: 'http://localhsot:5000',
                secure: false,
                changeOrigin: true,
                logLevel: 'debug'
            }
        }
    }
}

域名白名单

配置该配置后，只有匹配的host地址才可以访问该服务，常用于开发阶段模拟网络网络防火墙对访问IP进行限制。当该配置项被配置为all时，会跳过host检查，但不建议这样做，因为有DNS攻击的风险

1、webpack配置项配置

代码语言：javascript复制

module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com',
    ],
  },
};

2、CLI命令启动配置

代码语言：javascript复制

$ npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

参考

[1] webpack-dev-server GitHub
[2] webpack-dev-server NPM
[3] webpack-dev-server 从入门到实战

webpack server 服务器教程配置

0 人点赞