webpack4.x - 安裝webpack-dev-server

一.問題描述

在webpack4.x - 創建項目,打包第一個js文件這篇文章中,我們成功利用webpack實現了項目中js文件的打包操作,但是細心的同學可能發現了我們每一次修改相關代碼,都要通過npm run build命令重新打包我們的bundle.js文件,這樣我們才能看到效果,因此webpack-dev-server應運而生;

二.配置webpack-dev-server

2.1 修改webpack.config.js

/**
 * Created by Milogenius on 2020/1/5.
 */
const path = require('path')

let config = {
    mode: 'none',
    entry: {
        main: path.join(__dirname, './src/main.js')
    },
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, './dist')
    },
      // 開啓devServer
    devServer: {
        open: true,//自動打開瀏覽器
        port: 3306,//運行端口號
        contentBase: 'src',//託管目錄
        hot: true//啓用熱更新
    }
}


module.exports = config

2.2 修改package.json

  "scripts": {
    "build": "webpack --config webpack.config.js --progress --colors",
     //新增
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

三.安裝webpack-dev-server

npm i webpack-dev-server -D

四.測試

我們運行npm run dev顯示成功編譯,並且我們的項目已經被託管到web服務,可以通過http://localhost:8081訪問,說明我們安裝成功,接下來我們修改main.js,保存修改時候,控制檯會顯示再次編譯;如果我們向結束自動編譯,可以ctrl+c終止即可;

現在,我們訪問http://localhost:8081,成功進入頁面。點擊進入src,發現頁面並不是我們想要的效果;

其實,通過webpack-dev-server編譯的bundle.js文件默認在項目根路徑下,而不是我們之前配置的dist目錄下;修改index.html的引入路徑;

   <script src="../bundle.js"></script>

再次訪問,發現正常顯示,但是我們並沒有在上圖中發現bundle.js文件。因爲默認編譯完的文件會放到內存中，並沒有寫入到硬盤中，所以我們看不到；

五.小結

本篇文章我們主要講如何集成webpack-dev-server,關於更多用法大家可以參考官網