[TOC]

概述

首先来回顾以下webpack的内容

首先，我们来看看基本的webpack.config.js的写法

1
2
3
4
5
6
7
8
9
10
const path=require('path')
//这个配置文件，其实就是一个JS文件，通过Node中的模块操作，向外暴露了一个配置对象
module.exports={
	//在配置文件中需要手动指定入口和出口
	entry:path.join(__dirname,'./src/main.js'),//入口，表示要使用webpack打包哪个文件
	output:{
		path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
		filename:'bundle.js' //这是指定 输出的文件的名称
	}
}

​ 配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack –watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replace，即每次webpack编译之后，你还需要手动刷新浏览器。

​ webpack-dev-server其中部分功能就能克服上面的2个问题。

​ 原始文件作出改动后，webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即上面配置的:

1
2
3
4
output:{
		path:path.join(__dirname,'./dist'),//指定打包好的文件，输出到哪个目录中去
		filename:'bundle.js' //这是指定 输出的文件的名称
	}

​ 注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

安装webpack_dev_server

​ webpack_dev_server的作用其实就是“热部署”

​ 注意：一定要在本项目中安装webpack才行（不加-g，在项目根目录出现node_modules文件夹，内含webpack及其依赖包）

​ 

1
npm install webpack

​ 在本地项目中安装完webpack后，再在终端中进入项目目录下，敲下

1
npm install webpack-dev-server --save-dev

​ 回车来安装webpack_dev_server,

​ 之后再启动webpack_dev_server

​ 

1
.\node_modules\.bin\webpack-dev-server

​ 或者是npm run dev命令也行，为了避免出现webpack和webpack-dev-server之间的版本兼容性问题，这里举例按下图配置版本是没有问题的

​ 安装完成之后

1
2
3
4
5
6
7
8
9
10
11
12
"devDependencies": {
  "@babel/core": "^7.12.16",
  "@babel/eslint-parser": "^7.12.16",
  "@vue/cli-plugin-babel": "~5.0.0",
  "@vue/cli-plugin-eslint": "~5.0.0",
  "@vue/cli-service": "~5.0.0",
  "eslint": "^7.32.0",
  "eslint-plugin-vue": "^8.0.3",
  "webpack": "^5.73.0",
  "webpack-cli": "^4.10.0",
  "webpack-dev-server": "^4.9.2"
},

​

启动webpack-dev-server

1
2
3
4
5
6
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "dev": "webpack-dev-server"
},

​ 执行npm run dev

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(base)  frewen@FreweniMacBookPro  ~/02.ProjectsSpace/03.FrewenProjects/01.WorkSpace/i-burger/iburger-frontend   main ±  npm run dev

> iburger-frontend@0.1.0 dev
> webpack-dev-server

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.1.8:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/frewen/02.ProjectsSpace/03.FrewenProjects/01.WorkSpace/i-burger/iburger-frontend/public' directory
assets by status 116 KiB [cached] 1 asset
runtime modules 27.4 KiB 12 modules
orphan modules 18.8 KiB [orphan] 8 modules
cacheable modules 158 KiB
  // ......
webpack 5.73.0 compiled with 1 error and 1 warning in 1804 ms

​

报错：

1
Error: Unknown option '--inline'  webpack-dev-server