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