#yyds干货盘点#配置 dev-server

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了#yyds干货盘点#配置 dev-server相关的知识,希望对你有一定的参考价值。

安装依赖包

yarn add webpack-dev-server -D

常用配置

devServer: 
contentBase: path.join(__dirname, static), // 告诉服务器从哪里提供内容(默认当前工作目录)
openPage: views/index.html, // 指定默认启动浏览器时打开的页面
index: views/index.html, // 指定首页位置
watchContentBase: true, // contentBase下文件变动将reload页面(默认false)
host: localhost, // 默认localhost,想外部可访问用0.0.0.0
port: 8080, // 默认8080
inline: true, // 可以监控js变化
hot: true, // 热启动
open: true, // 启动时自动打开浏览器(指定打开chrome,open: Google Chrome)
compress: true, // 一切服务都启用gzip 压缩
disableHostCheck: true, // true:不进行host检查
quiet: false,
https: false,
clientLogLevel: none,
stats: // 设置控制台的提示信息
chunks: false,
children: false,
modules: false,
entrypoints: false, // 是否输出入口信息
warnings: false,
performance: false, // 是否输出webpack建议(如文件体积大小)
,
historyApiFallback:
disableDotRule: true,
,
watchOptions:
ignored: /node_modules/, // 略过node_modules目录
,
proxy: // 接口代理(这段配置更推荐:写到package.json,再引入到这里)
"/api-dev":
"target": "http://api.test.xxx.com",
"secure": false,
"changeOrigin": true,
"pathRewrite": // 将url上的某段重写(例如此处是将 api-dev 替换成了空)
"^/api-dev": ""


,
before(app) ,

根据目录结构的不同,contentBase、openPage 参数要配置合适的值,否则运行时应该不会立刻访问到你的首页; 同时要注意你的 publicPath,静态资源打包后生成的路径是一个需要思考的点,这与你的目录结构有关。

​package.json 添加运行命令

"scripts": 
"dev": "cross-env BUILD_ENV=development webpack-dev-server --mode development --colors --profile"

不同操作系统传递参数的形式不一样,cross-env 可以抹平这个平台差异。

  1. 实用技巧:
  1. dev-server 的代码通常在内存中,但也可以写入硬盘,产出实体文件:

writeToDisk: true,

通常可以用于代理映射文件调试,编译时会产出许多带 hash 的js 文件,不带 hash 的文件同样也是实时编译的

  1. 有的时候,启动服务时,想要默认使用本地的 ip 地址打开:

disableHostCheck: true, // true:不进行host检查
// useLocalIp: true, // 建议不在这里配置
// host: 0.0.0.0, // 建议不在这里配置

同时还需要将 host 配置为 ​​0.0.0.0​​,这个配置建议在 scripts 命令中追加,而非在配置中写死,否则将来不想要这种方式往回改折腾,取巧一点,配个新命令:

"dev-ip": "yarn run dev --host 0.0.0.0 --useLocalIp",
  1. 有时启动的时候希望是指定的调试域名,例如:local.test.baidu.com

open: true,
public: local.test.baidu.com:8080, // 需要带上端口
port: 8080,

同时需要将 ​​127.0.0.1​​ 修改为指定的 host,可以借助 iHost 等工具去修改,各个工具大同小异,格式如下:

127.0.0.1 local.test.baidu.com

服务启动后将自动打开 ​​local.test.baidu.com:8080​​ 访问

  1. dev-server 调试时,启动 gzip 压缩:

compress: true,

以上是关于#yyds干货盘点#配置 dev-server的主要内容,如果未能解决你的问题,请参考以下文章

#yyds干货盘点#nginx代理配置

#yyds干货盘点#sql注入总结

#yyds干货盘点# springboot配置@Async异步任务的线程池

#yyds干货盘点# springboot整合Elastic Job实现分片配置定时任务

#yyds干货盘点#nginx配置反向代理

#yyds干货盘点#网络配置