webpack-dev-server的安裝與使用

梭梭醬加油鴨發表於2019-03-03
WebdevServer

安裝

  1. 區域性安裝：

npm install --save-dev webpack-dev-server@版本號

  1. 全域性安裝： npm install -g webpack-dev-server@版本號

注意：在開始一個專案的各種外掛、依賴安裝之前，需要npm init一下，編輯專案的各種資訊。

域名設定及訪問

  1. 找到webpack.config.js檔案，在裡面加上如下程式碼：
        'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
    }
複製程式碼
  1. 通過如下命令啟動： webpack-dev-server --inline --port 8088
  2. 開啟localhost：8088/即可通過瀏覽器訪問專案

注意：webpack-dev-serve安裝以後，對程式碼作出任何修改，不用再在bash裡使用webpack指令打包專案，bash就會自動編譯。但還需要下面這一步，瀏覽器才會實時顯示程式碼編輯的效果。

  1. 在webpack.config.js裡設定publicPath,也就是訪問時的路徑（path設定的是打包後存放的路徑）
output:{
        path:'./dist',
        publicPath: '/dist',//加這個
        filename:'js/[name].js'
    },
複製程式碼

環境變數的配置

目的：區分線上線下環境 方法：

var WEBPACK_ENV = process.env.WEBPACK_ENV || 'dev';
console.log(WEBPACK_ENV);
……
if (WEBPACK_ENV === 'dev') {
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/')
};//只需要在本地環境在入口設定域名
複製程式碼

此時在bash終端輸入WEBPACK_ENV=dev webpack-dev-server --inline --port 8088即可通過瀏覽器檢視效果。

簡化bash指令

上面的一長串bash指令實在太麻煩，記不住啊～～ 找到package.json檔案，加上如下命令：

"scripts": {
    "dev"      : "WEBPACK_ENV=dev webpack-dev-server --inline --port 8088",
    "dev_win"  : "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
    "dist"     : "WEBPACK_ENV=online webpack -p",
    "dist_win" : "set WEBPACK_ENV=online && webpack -p",
    "build"    : "webpack --mode production"
  },
複製程式碼

以win結尾的是在Windows系統下的命令，注意上方簡寫在bash中使用時需要加上npm run字首。

相關文章