webpack學習_webpack-dev-server自動編譯代碼

之前每次修改完之后都要執行npm run build來編譯,下面有三種方式可以實現代碼變化后自動編譯代碼,下面只重點說webpack-dev-server,其他的請看webpack開發文檔

1.webpack's Watch Mode  指示 webpack "watch" 依賴圖中的所有文件以進行更改。如果其中一個文件被更新，代碼將被重新編譯，所以你不必手動運行整個構建(雖然不用執行npm run build就自動編譯,可是需要自主率先你瀏覽器)

2.webpack-dev-server 提供了一個簡單的 web 服務器，並且能夠實時重新加載(既能夠改變代碼后自動編譯也能夠讓瀏覽器自動重新加載)

3.webpack-dev-middleware是一個容器(wrapper)，它可以把 webpack 處理后的文件傳遞給一個服務器(server)。 webpack-dev-server 在內部使用了它，同時，它也可以作為一個單獨的包來使用，以便進行更多自定義設置來實現更多的需求。(有一丟丟復雜,詳情看webpack開發文檔)

這里着重看到的是第二個方法webpack-dev-server

Step1:安裝

npm install --save-dev webpack-dev-server

Step2:webpack.config.js配置devServer,配置告知 webpack-dev-server，在 localhost:8080 下建立服務，將 dist 目錄下的文件，作為可訪問文件

module.exports = {
   ...
       devServer: {
           contentBase: './dist'
       },
   ...
  };

Step3:在package.json配置添加script腳本

{
    "scripts": {
        ...
         "start": "webpack-dev-server --open",
        ...
    },
}

Step4:運行npm start 瀏覽器自動加載頁面,修改和保存任意源文件,web服務器就會自動重新加載編譯后的代碼