特点：打包时不生成 dist 打包文件而是在内存中进行打包构建，自动监听 js、css 文件变化并更新视图，

一、webpack5 使用 webpack-dev-server 搭建开发服务器

1. 初始化环境

npm init -y

2. 安装环境依赖

npm install webpack cross-env webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader -D

3. 在 package.json 中修改 scripts

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack serve",
  "build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js --progress --color "
},

4. 新建css文件 src\assets\css\index.css

body{
    background: #f5c7c7;
    /* background: #ccc; */
}

5. 新建入口文件 src/index.js

import './assets/css/index.css'
console.log('hello world');
// console.log('hello world change');

6. 创建 webpack.config.js 配置文件

var path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/index.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name]-[hash:10].js",
  },
  mode: process.env.NODE_ENV,
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "my title",
      filename: "index.html",
      template: path.resolve(__dirname, "./src/index.html"),
      meta: {
        viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
        "theme-color": "#4285f4",
      },
    }),
  ],
  devServer: {
    host: "localhost",
    port: 8080,
    open: true,
  },
};

7. 打包测试
   修改js和css文件内容视图会自动更新

npm run dev