vue-cli webpack淺析

一直對腳手架的webpack配置很感興趣。

長話短說,先從npm start開始。

打開package.json 找到scripts

可以看到start 運行的是dev, dev 又是從 build/webpack.dev.conf.js 開始的。

npm start 做了什麼

npm start =》 npm run dev =》webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0

拆解一下 webpack-dev-server  可以提供一個web服務器,在你有更改的時候可以自動刷新。爲什麼是webpack-dev-server?webpack提供三個解決方法,推薦webpack-dev-server

貼上圖片

 

 

現在知道是使用的webpack-dev-server起的服務 那麼--inline 是什麼意思呢?

因爲webpack-dev-server 提供兩種刷新方式,一種是iframe 一種是inline 。 所以這裏--inline代表 使用inline模式。

內聯模式是inline 輪詢模式是iframe。

再往後看 --progress 加上以後可以將運行進度輸出到控制檯。

繼續 --config 告訴webpack-dev-server 配置文件使用此選項後面的文件 也就是 build/webpack.dev.conf.js

最後 --host 0.0.0.0 指定使用一個 host。默認是 localhost。如果你希望服務器外部可訪問,指定如下:

至此npm start發什麼了什麼,我們大致知道了,所以 去看build/webpack.dev.conf.js。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章