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,。