轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack開發環境devServer配置

一、使用 devServer

為什么要使用 devServer？

答：因為在開發調試的過程中不用頻繁的去執行型打包命令，等待打包完成才能進行調試。devServer 會自動在內存內打包，并自動打開或刷新瀏覽器。

1.1、核心配置

/*
    webpack.config.js webpack的配置文件
    作用:指示webpack干哪些活(當你運行webpack指令時,會加載里面的配置)所有構建工具都是基于nodejs平臺運行的~模塊化默認采用commonjs.
    loader: 1.下載 2.使用(配置loader)
    plugins: 1.下載2. 引入 3.使用

    路徑： ./webpack.config.js
*/

// resolve用來拼接絕對路徑的方法
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MinicssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // webpack配置
      ……

    //開發服務器devServer:用來自動化(自動編譯, 自動打開瀏覽器, 自動刷新瀏覽器)
    //特點:只會在內存中編譯打包,不會有任何輸出
    //啟動devServer指令為: npx webpack-dev-server
    devServer: {
        //項目構建后路徑
        contentBase: resolve(__dirname,'build'),
        //啟動gzip壓縮
        compress: true,
        //端口號
        port: 3000,
        //自動打開瀏覽器
        open: true
    }
}

1.2、需要安裝的插件

# 安裝 webpack-dev-server
> npm i webpack-dev-server@3.10.3 -D

1.3、運行方式

> npx webpack-dev-server

1.4、常見問題

1.4.1、webpack 和 webpck-dev-server 兼容性問題

# 問題1：Error: Cannot find module 'webpack-cli/bin/config-yargs'
# 主要是版本兼容性問題。
# 現有 package.json 文件
"devDependencies": {
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
}

# 修改成

"devDependencies": {
    "webpack": "^5.2.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
}

# 或者卸載 webpack-cli 從新安裝3.* 版本
>  npm uninstall webpack-cli
>  npm install webpack-cli@3 -D

1.4.2、簡化啟動

# 調整package.json 文件
 "scripts": {
    "build": "node_modules/.bin/webpack --config webpack.config.js",
    "start": "npx webpack-dev-server --config webpack.config.js --open Chrome.exe"
  }

# 然后執行
> npm run start

1.4.3、和 webpack 打包命令的區別

# 開發環境配置目標:能讓代碼運行
# 運行項目的指令有兩種:

#會將打包結果輸出出去
> webpack

#只會在內存中編譯打包,沒有輸
> npx webpack-dev-server

1.4.3、安裝路徑問題

為了能使webpack-dev-server建議最好在本地安裝 webpack、webpack-cli、和 weback-web-server，至少不要把3者拆開，比如 webpack-cli 使用全局安裝。

遇到問題首先到github項目的Issues中，檢索一下相關問題，比在百度谷歌上直接搜索非官方解決方案好得多。