webpack-dev-server頁面不能自動重新整理的解決

webpack-dev-server

提供了一個簡單的 web 伺服器，并且能夠實時重新加載

通過官方文檔各種配置，自己實驗了一把，不知道是哪裡出了問題，一直實作不了實時加載，後來查閱資料，一個很簡單的配置就實作了實時加載，在這裡記錄一下：

• 需要先初始化

  webpack-dev-server

注意，如果像上面那樣沒有指定哪個版本的話就去下載下傳，會下載下傳最新的 webpack-dev-server，坑就在這裡，如果你的項目中的

webpack

不是最新的，那麼你使用webpack-dev-server起來會有錯誤的，是以根據你的項目中的webpack版本去下載下傳它，

比如我的項目使用的webpackv3X的版本就下載下傳的是[email protected]的

• -

在

webpack.config.js

中進行配置

1.需要在

entry

配置項中配置

client

：

本項目的common入口是公用方法，每個頁面中都會使用到，是以，需要在每個頁面中都能使用的入口檔案中去，再填入

client

的配置，下面的配置指定了通路的url

entry:{
    'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],
    'index':['./src/page/index/index.js'],
    'login':['./src/page/login/index.js']
  },
           

2.修改

output

配置：

坑就在這裡，大家都知道

output

中的

path

是打包後檔案放置的地方，并不是url通路檔案的路徑，而熱更新需要提供出一個url通路檔案的路徑，是以還需要在多加一個

publicPath

，對應的是url的路徑

output:{
    path:path.resolve(__dirname, 'dist'),//存放檔案的路徑
    publicPath:'/dist/',//通路檔案的路徑,這裡的根路徑是根據url來的，比如通路http://localhost:/dist/，那麼就是對應/dist/
    filename:'js/[name].js'
  },
           

- 在指令行輸入

如果想像下面那樣輸入指令的話，你要確定你在全局安裝過webpack-dev-server

webpack-dev-server --inline --port 
           

之後就在浏覽器中打開http://localhost:8088/

就能實作實時加載了

截止到這一步，僅僅是簡單的實作了自動重新整理，但是并不能滿足日常的開發

webpack-dev-server自動重新整理，隻是我們在開發時候需要的一個工具；

而在上面的

entry

，入口配置中，配置了

'common':['./src/page/common/index.js','webpack-dev-server/client?http://localhost:8088/'],

打包的時候也會把入口的本地url打包到線上，顯然是沒有用的

解決方法：

在Node.js中，可以進行環境變量配置

那麼接着打開剛剛修改好的

webpack.config.js

1. 配置一個環境變量，這個變量取值是

   dev

   或

   online

// 環境變量配置，取值dev 或online
let WEBPACK_ENV         = process.env.WEBPACK_ENV || 'dev';

const configs = {............
           

2.然後更改一下

entry

配置項，去掉寫死的url

const configs = {
    entry:{
            'common':['./src/page/common/index.js'],
            'index':['./src/page/index/index.js'],
            'login':['./src/page/login/index.js']
          },
    .......
}
           

3.更改

output

配置

output:{
    path:path.resolve(__dirname, 'dist'),
    //更改的此處
    publicPath:'dev' === WEBPACK_ENV ? '/dist/' : '',
    filename:'js/[name].js'
  },
           

4.在configs輸出之前，對之前聲明的

WEBPACK_ENV

的值判斷一下

如果是開發環境，那麼我們就配置url讀取路徑

if('dev' === WEBPACK_ENV){
    configs.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
           

關鍵來了，WEBPACK_ENV是如何指派的呢？

我們在啟動這個項目的時候去指派的，

輸入指令行，啟動項目并指派給WEBPACK_ENV

npm run set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 
           

這一大串的指令行真的看上去很讨厭，

在

package.json

"scripts": {
    "dev": "set WEBPACK_ENV=dev&& webpack-dev-server --inline --port 8088",
    "build": "webpack"
  },
           

之後就可以愉快的輸入指令

npm run dev