526互联

webpack开发环境devServer配置

发布时间 2023-08-21 00:02:23作者: Eword

转载请注明 来源: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中，检索一下相关问题，比在百度谷歌上直接搜索非官方解决方案好得多。