前端配置webpack dev server

最新推荐文章于 2026-03-01 04:00:06 发布

原创最新推荐文章于 2026-03-01 04:00:06 发布 · 501 阅读

本内容遵循CC 4.0 BY-SA版权协议

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

"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数组中