作用：开发服务器devServer用于自动化（自动编译、自动打开浏览器、自动刷新……）
    特点：在内存中编译打包，不会有任何输出

    • 项目目录

    image.png

    • 安装

      • 局部安装

        1. 安装 npm i webpack-dev-server -D
        2. 启动 npx webpack-dev-server

      • 全局安装

        安装 npm i webpack-dev-server -g
启动 webpack-dev-server

    • 配置文件 ```javascript const { resolve } = require(‘path’); const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

    module.exports = { entry: ‘./src/index.js’, output: { filename: ‘built.js’, path: resolve(__dirname, ‘build’) }, module: { rules: [ { test: /.css$/, use: [‘style-loader’, ‘css-loader’] }, // 打包其他资源(除了html/js/css资源以外的资源) { // 排除css/js/html资源 exclude: /.(css|js|html|less)$/, loader: ‘file-loader’, options: { name: ‘[hash:10].[ext]’ } } ] }, plugins: [ new HtmlWebpackPlugin({ template: ‘./src/index.html’ }) ], mode: ‘development’,

    // 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~） // 特点：只会在内存中编译打包，不会有任何输出 // 启动devServer指令为：npx webpack-dev-server devServer: { // 项目构建后路径 contentBase: resolve(__dirname, ‘build’), // 启动gzip压缩 compress: true, // 端口号 port: 3000, // 自动打开浏览器 open: true } };

    ```

    • 执行指令：
      • 局部安装 npx webpack-dev-server
      • 全局安装 webpack-dev-server
    • 注意：
      • 开发服务器仅对开发环境有效, 当mode=’production’时, 不起作用