webpack 插件 server 插件与plugin插件安装配置

两个插件

1、webpack -dev-serve 插件

每次修改源代码时，webpack 会自动进行项目的打包和构建

2、html-webpack-plugin插件

复制到根目录的index.html页面,也放到了内存当中

html插件生成的index.html页面，自动注入了打包的boundele.js文件（不需要在HTML文件引入js文件）

---

一、webpack -dev-server 安装与配置

在文件所在终端中输入webpack -dev-server 命令

npm  install  webpack-dev-server@3.11.2 -D

1.修改package.json->script中的dev命令如下

  "scripts": {

    "dev": "webpack serve"

  },

2.再次进行打包

npm run dev

在修改源代码时会发现终端有所改变 会根据修改进行打包

需要退出打包 按两次 CTRL C

二、html-webpack-plugin 安装与配置

在文件所在终端中输入html-webpack-plugin命令

npm  install  html-webpack-plugin@5.3.2 -D

1.修改package.json->script中文件如下

 

注意

！！！vue的cli搭建了脚手架，不需要配置webpack ，但需要理解webpack 的实现过程