前端配置webpack dev server

本文介绍了如何配置Webpack Dev Server,并讲解了命令行参数的处理方式,包括使用yargs工具进行参数解析,以及不同形式的命令行参数如何影响process.env.argv和process.env.npm_config_params的设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

"scripts": {
  "serve": "vue-cli-service serve",
  "serve1": "vue-cli-service --serve1",
  "serve2": "vue-cli-service -serve2",
  "serve3": "vue-cli-service serve --mode=dev --mobile -config build/example.js"
}
复制代码

除了第一个可执行的命令,以空格分割的任何字符串(除了一些shell的语法)都是参数,并且都能通过process.argv属性访问

process.argv属性返回一个数组,这个数组包含了启动node进程时的命令行参数。第一个元素为启动node 进程的可执行文件的绝对路径名process.execPath,第二个元素为当前执行的JavaScript文件路径。剩余的元素为其他命令行参数。

比如执行npm run serve3命令,process.argv的具体内容为:

[ '/usr/local/Cellar/node/7.7.1_1/bin/node',
  '/Users/mac/Vue-projects/hao-cli/node_modules/.bin/vue-cli-service',
  'serve',
  '--mode=dev',
  '--mobile',
  '-config',
  'build/example.js']

可以使用yargs参数解析工具解析解析如下:

_: [ 'serve' ], mode: 'dev', mobile: true, config: 'build/example.js', '$0': '/Users/mac/Vue-projects/hao-cli/node_modules/.bin/vue-cli-service'}

npm run serve --params  // 参数params将转化成process.env.npm_config_params = true
npm run serve --params=123 // 参数params将转化成process.env.npm_config_params = 123
npm run serve -params  // 等同于--params参数

npm run serve -- --params  // 将--params参数添加到process.env.argv数组中
npm run serve params  // 将params参数添加到process.env.argv数组中
npm run serve -- params  // 将params参数添加到process.env.argv数组中
 

### 关于 Webpack DevServer配置与使用 #### 启动 Webpack Dev Server 在终端中可以通过如下命令来启动 Webpack Dev Server: ```bash npx webpack serve ``` 这会基于项目中的 `webpack.config.js` 文件自动读取并应用相应的设置[^1]。 #### 推荐的包版本组合 为了确保兼容性和稳定性,建议使用的 Webpack 及其相关工具的版本为: - `webpack@5.42.1` - `webpack-cli@4.9.2` - `webpack-dev-server@3.11.2` 这些特定版本能够很好地协同工作,在大多数情况下可以避免不必要的错误和冲突[^2]。 #### 功能特性概述 Webpack Dev Server 提供了一系列强大的功能支持前端开发过程,其中包括但不限于: - 实时重新加载(Live Reloading) - 热模块替换(Hot Module Replacement, HMR) - 开发者友好的界面显示编译状态 - 支持 HTTPS 协议下的安全连接测试 - 轻松实现跨域资源共享(CORS)请求转发等功能 通过合理利用上述特性,开发者可以在更高效的环境中构建应用程序[^3]。 #### 新版配置项说明 对于 Webpack 5 版本而言,部分旧有的配置选项已经被移除或者更改。例如原来的 `contentBase` 已经被替代为 `static.directory` 来指定静态资源目录的位置。下面是一个完整的配置实例: ```javascript const path = require('path'); module.exports = { // ...其他配置... devServer: { static: { directory: path.join(__dirname, 'public'), }, compress: true, port: 9000, } }; ``` 此段代码定义了一个简单的 Webpack Dev Server 设置,其中指定了服务端口为 9000 并启用了压缩传输以提高页面加载速度;同时设置了静态文件夹路径以便正确提供 HTML/CSS/JS 等资源给浏览器访问[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值