一、devserver背景

每次改代碼都需要重新部署,
或者只改變修改代碼行的效果
所以出現(xiàn)了devserver本地服務(wù)
為了完成自動編譯，webpack提供了幾種可選的模式
方式一：webpack watch mode

• 實現(xiàn)方法一： 在導(dǎo)出的配置中，添加watch:true
• 實現(xiàn)方法二： 在啟動webpack的命令中，添加–watch的標(biāo)識

方式二：webpack-dev-server(常用)

二、webpack-dev-server

上面的方式可以監(jiān)聽到文件的變化，但是事實上它本身沒有自動刷新瀏覽器的功能的，
當(dāng)然我們可以通過vscode使用live-server來完成這樣的功能，但是我們希望不使用live-server的情況下，可以具備實時重新加載的功能
步驟：
1、安裝npm install webpack-dev-server -D
2、增加命令"serve":“webpack serve”
3、npm run serve即可

用這個啟動項目有個特點(diǎn)：
不會輸出build文件夾
因為localhost8080—express(src等靜態(tài)文件)
打包時直接將src等文件編譯后放到內(nèi)存里，然后直接使用express框架發(fā)起服務(wù)
如果先編譯，放到外存里，然后將其上傳到內(nèi)存，然后使用express框架發(fā)起服務(wù)。那樣會降低效率

三、對devserver進(jìn)行一些配置：

在webpack.config.js中，寫上

devServer:{
  contantBase:"./abc"
}

如果index.html里<script. src=“./aaa.js”>， 打包時會去找abc/aaa.js,這就是contantBase的作用，可以理解為去源代碼里找文件，一般值是"./public"
因為webpack.config.js中配置了webcopyPlugin,如果沒有配置，那么就不會
拷貝圖片等靜態(tài)文件，這時候就需要去public文件夾中尋找。

一般開發(fā)階段使用contantBase
一般打包階段(上傳服務(wù)器)使用copyplugin

四、模塊熱替換HMR

應(yīng)用程序在運(yùn)行過程中，替換，添加，刪除模塊都會重新刷新整個頁面，拿計數(shù)器案例為例：
加到199了，js代碼新增了console.log(“aaa”)
導(dǎo)致199變成了0

target:"web"
 devserver:{
  contantBase:"./abc",
  hot:true，//熱更新
 open:true,//build自動打開瀏覽器
 host://默認(rèn)lolaohost，也可0.0.0.0，這樣同一網(wǎng)段的主機(jī)都能通過ip訪問
 port:7777//訪問項目時的端口號
 compress:true瀏覽器請求靜態(tài)資源時壓縮一下，打開瀏覽器的檢查時可以看到bundle.js的content-encoding是gzip，瀏覽器自動解壓
}

main.js中，import "./js/element":改為
import "./js/element":
if(module.hot){
  module.hot.accept("./js/element.js",()=>{
    console.log("模塊發(fā)生更新了")
   }
}

.vue文件中修改message也會觸發(fā)模塊熱替換的
修改了這個配置需要重新npm run serve

五、跨域訪問問題：

localhost7777的項目代碼中axios了localhost8000的數(shù)據(jù)moment，就會出現(xiàn)跨域訪問報錯，(瀏覽器不允許跨域)
解決辦法

devserver:{
contantBase:“./abc”,
hot:true，
open:true,
host:
port:7777
proxy:{
“/api”:“http://localhost:8888”
}
}

然后在axious時，改成axious(“/api/moment”)
這樣仍會報錯，因為axious解析時會把/api/moment解析成http://localhost:8888/api/moment,所以會報錯404
解決辦法：

proxy:{
“/api”:{
target:“http://localhost:8888”,
pathRewrite:{
“^/api”:“”
},
secure:false,//若target是https，并且secure是true,就會停止訪問
changeOrigin:true,//當(dāng)前項目是localhost7777,代理是localhsot8888,在真實請求服務(wù)器時，服務(wù)器會檢查源頭在哪，如果不加changeOrigin,那么服務(wù)器會看到header里localhost:7777/api/moment,而不是8888
}

六、webpack的resolve：

import時后邊的括號可以寫：

• 相對路徑
• 絕對路徑
• node_module

下邊介紹node_module：
webpack.config.js里有一個（如果沒有，那就是全取得默認(rèn)值）

resolve:{
modules : [“node_modules”]//默認(rèn)從這里找，所以文件夾不能改名字
extension:[“.js”,“.vue”]
alias:{
“js”:path.resolve(__dirname,“./src/js”),
“@”:path.resolve(__dirname,“./src”),
這樣配置上后main.js中的import不用寫./開頭了
}
}

如何判斷是文件還是文件夾呢
如果沒有后綴，那么匹配js/json/jms去找文件，如果有那就是文件，如果沒有那就是文件夾，如果是個文件夾，看看里邊有沒有index的文件

七、區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境

package.json中指令里
build值改為“webpack --config ./config/webpack.prod.config.js”
serve值改為“webpack serve --config ./config/webpack.dev.config.js“

npm install webpack-merge

新建文件夾config
新建文件webpack.prod.config.js

const {cleanWebpackPlugin}=require("clean-webpack-plugin")
const copyWebpackPlugin = require("copy-webpack-plugin")
const {merge} =require("webpack-merge")
const commonConfig= require("./config/webpack.common.config.js")

module.exports=merge(commonConfig,{
   mode:"production",
   plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
    patterns: [
      {
         from: ' "public" ,
         to: "./",
        glob0ptions: {
           ignore: [
              "**/ index . html"
           ]}
       }
    ]
  }))
]

新建文件webpack.dev.config.js

module.exports={
    mode:"development",
    devtool:"source-map",
    devserver:{
      contantBase:"./abc",
      hot:true，
      open:true,
       host:
       port:7777
       proxy:{
         "/api":"http://localhost:8888"
      }
   }
}

新建文件webpack.common.js

module.exports={
   公共的一些配置留在這個文件里
} 

到此這篇關(guān)于vue devserver及其配置的文章就介紹到這了,更多相關(guān)vue devserver配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論