场景:优化上一种实现方式、若是商场愈来愈多,按照上一种的实现方式就必须每添加一个商场就在package.json中配置两个命令。有没有更简单的实现方式??webpack
参考:https://blog.csdn.net/riddle1981/article/details/82871545web
目的:把项目名经过命令行传入配置文件中 经过npm run dev xxxx命令运行xxxx对应的商场文件、npm run build xxx命令打包xxx对应的商场文件npm
直接npm run dev demo确定是不能实现的 会让你npm install demo 由于webpack不认这种传参数的方式json
经过查看package.json里的文件 npm run dev运行的真实命令实际上是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js这条命令启动webpack-dev-server
模块并将配置参数传入,关于配置参数--
是webpack声明参数的方式webpack-dev-server
1.如何经过命令行获取目录名?优化
最开始使用--key value的方式 npm run dev --name demo 会提示demo这个模块没有安装 根据报错提示能够看出webpack并未将demo当作是name的值而是识别为一个单独的模块。ui
关于–env的参数用法官方给出了示例 查看webpack官方命令行借口参数进行更改.net
npm run dev -- --env.name=demo 能够运行命令行
使用process.argv获取模块名 在config里面的prod.env.js配置模块名3d
可是要输入npm run dev -- --env.name=demo
这么长一串好像不太合理。最好是输入npm run demo
就能够启动。
中间人方案:更改package.json文件
构建用来将参数传递给配置文件devServer,首先在build目录下建立一个js文件取一个你认为合适的名字用dev配置为启动的命令简写。devServer.js内容以下。
这里实现的功能是接收参数开启子进程将参数拼接在子进程中运行,并将子进程的标准输出和标准错误与父进程的标准输出和标准错误经过管道进行连接,这样就能够及时的获取子进程的输出及报错信息了。