devServer的配置

devServer指的是用webpack開發服務器環境，需要注意的是devServer的配置只能在development（開發環境中）

安裝依賴

npm install webpack-dev-server -D

webpack.comfig.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  // 入口文件
  entry: "./src/index.js",
  // 出口文件
  output: {
    // 出口文件名稱
    filename: "bluid.js",
    // 智能合並路徑，絕對路徑
    path: resolve(__dirname,'build')
  },
  module: {
    rules: [
        {
            // 引導打包文件和編譯的文件為css文件
            test: /\.css$/,
            // 內部執行哪些loader，loader的執行順序是倒敘的，后寫的先執行
            use: [
              // 識別css-laoder的js字符串為樣式代碼，添加到head標簽
              'style-loader',
              // css-loader是將樣式的代碼翻譯為js的模式，內部是樣式的字符串
              'css-loader'
            ]
          },      
      {
        // 識別.js結尾的文件
        test: /\.js$/,
        // 不需要識別/翻譯node_modules文件夾內部的內容
        exclude: /node_modules/,
        // 使用的loader
        use: [
          {
            loader: 'babel-loader',
            // 指導babel-loader進行翻譯的配置工具
            options: {
              presets: ['env'] // env 指的是ECMAScript New Version（ES的新版本）
            }
          }
        ]
      },
      {
        // 配置編譯img標簽引入的圖片
        loader: 'html-loader',
        test: /\.html$/
      }
    ]
  },
  plugins: [
    // 配置html的文件
    new HtmlWebpackPlugin({
      // template表示是引入的模板文件地址
      template: './src/index.html',
      // 壓縮HTML代碼
      minify: {
        // 移除所有的空格
        collapseWhitespace: true,
        // 移除注釋
        removeComments: true
      }
    }),
    new MiniCssExtractPlugin()
  ],
 devServer: { // 項目編譯后的路徑，代碼編譯的位置是在計算機的內存中，看不到
    contentBase: resolve(__dirname, 'bluid'),
    // 端口號
    port: 3000
  },
  // 實時監聽
  watch: true,
  // 打包模式
  mode: 'development'
}

此時的服務器環境是有實時編譯和實時更新的（熱更新）

如果需要自動打開瀏覽器，可以配置open屬性為true

devServer: {
    // 項目編譯后的路徑，代碼編譯的位置是在計算機的內存中，看不到
    contentBase: resolve(__dirname, 'bluid'),
    // 端口號
    port: 3000,
    // 配置自動打開瀏覽器
    open: true
 }

此時webpack之后會自動打開瀏覽器