npx serve

用于快速启动静态文件服务器的命令行工具。这个工具可以帮助开发者在本地快速查看 HTML、CSS 和 JavaScript 文件的效果，而无需设置复杂的服务器环境。

前序

对于本地的静态资源预览，有些可能需要启动http服务，才能实现更好的预览效果。
之前用的主要是VsCode的插件LiveServer来快速开启。查阅vue官方时，发现了这个指令。简单了解一下大概。

使用

对于一个如下的目录结构

/project
  ├── index.html
  ├── styles.css
  └── script.js

打开控制台输入npx serve，如果是第一次会需要输入y，执行下载依赖包，之后会自动开启本地服务。

PS D:\project>npx serve
Need to install the following packages:
  serve@14.2.4
Ok to proceed? (y) y

   ┌─────────────────────────────────────────┐
   │                                         │
   │   Serving!                              │
   │                                         │
   │   - Local:    http://localhost:3000     │
   │   - Network:  http://172.29.16.1:3000   │
   │                                         │
   │   Copied local address to clipboard!    │
   │                                         │
   └─────────────────────────────────────────┘

指定端口号

通过使用 -l 参数指定其他端口

1	npx serve -l 3000

设置缓存时间

通过 -t 参数设置缓存时间，以秒为单位。例如，设置缓存时间为 10 秒

1	npx serve -t 10

启用压缩

通过 -c 参数可以启用 gzip 压缩，提高传输效率

1	npx serve -c

简易结合webpack

初始化package添加script

"scripts": {
  "build": "webpack",
  "serve": "npx serve dist"
}

安装依赖

1	npm install webpack webpack-cli serve --save-dev

配置 Webpack

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development'
};

运行

1 2	npm run build npm run serve