一、devserver背景

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

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

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

二、webpack-dev-server

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

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

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

在webpack.config.js中，寫上

devServer:{
  contantBase:"./abc"
}

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

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

四、模塊熱替換HMR

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

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

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

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

五、跨域訪問(wèn)問(wèn)題：

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

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

然后在axious時(shí)，改成axious(“/api/moment”)
這樣仍會(huì)報(bào)錯(cuò)，因?yàn)閍xious解析時(shí)會(huì)把/api/moment解析成http://localhost:8888/api/moment,所以會(huì)報(bào)錯(cuò)404
解決辦法：

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

六、webpack的resolve：

import時(shí)后邊的括號(hào)可以寫：

• 相對(duì)路徑
• 絕對(duì)路徑
• node_module

下邊介紹node_module：
webpack.config.js里有一個(gè)（如果沒(méi)有，那就是全取得默認(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不用寫./開(kāi)頭了
}
}

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

七、區(qū)分開(kāi)發(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={
   公共的一些配置留在這個(gè)文件里
} 

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

最新評(píng)論