場景:優化上一種實現方式、若是商場愈來愈多,按照上一種的實現方式就必須每添加一個商場就在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內容以下。
這裏實現的功能是接收參數開啓子進程將參數拼接在子進程中運行,並將子進程的標準輸出和標準錯誤與父進程的標準輸出和標準錯誤經過管道進行連接,這樣就能夠及時的獲取子進程的輸出及報錯信息了。