Vue基础自学系列 | webpack中的插件

Posted 2022-09-02 COCOgsta

视频来源：B站《黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程》

一边学习一边整理老师的课程内容及试验笔记，并与大家分享，侵权即删，谢谢支持！

附上汇总贴：Vue基础自学系列 | 汇总_COCOgsta的博客-CSDN博客

---

1. webpack插件的作用

通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：

1. webpack-dev-server

   1. 类似于node.js阶段用到的nodemon工具
   2. 每当修改了源代码，webpack会自动进行项目的打包和构建

1. html-webpack-plugin

   1. webpack中的HTML插件（类似于一个模板引擎插件）
   2. 可以通过此插件自定制index.html页面的内容

1. webpack-dev-server

webpack-dev-server可以让webpack监听项目源代码的变化，从而进行自动打包构建。

2.1 安装webpack-dev-server

运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

2.2 配置webpack-dev-server

1. 修改packgage.json->scripts中的dev命令如下：

"scripts": 
  "dev": "webpack serve",  // scripts节点下的脚本，可以通过npm run执行

复制代码

1. 再次运行npm run dev命令，重新进行项目的打包

1. 在浏览器中访问http://localhost:8080地址，查看自动打包效果

注意：webpack-dev-server会启动一个实时打包的http服务器

2.3 打包生成的文件哪儿去了？

1. 不配置webpack-dev-server的情况下，webpack打包生成的文件，会存放到实际的物理磁盘上

   1. 严格遵守开发者在webpack.config.js中指定配置
   2. 根据output节点指定路径进行存放

1. 配置了webpack-dev-server之后，打包生成的文件存放到了内存中

   1. 不再根据output节点指定的路径，存放到实际的物理磁盘上
   2. 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

2.4 生成到内存中的文件该如何访问？

webpack-dev-server生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

• 可以直接用 / 表示项根目录，后面跟上要访问的文件名称，即可访问内存中的文件

• 例如 /bundle.js就表示要访问webpack-dev-server生成到内存中的bundle.js文件

1. html-webpack-plugin

html-webpack-plugin是webpack中的HTML插件，可以通过此插件自定制index.html页面的内容。

需求：通过html-webpack-plugin插件，将src目录下的index.html首页，复制到项目根目录中一份！

3.1 安装html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：

npm install html-webpack-plugin@5.3.2 -D

3.2 配置html-webpack-plugin

// 1. 导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

// 2. 创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin(
  template: './src/index.html',  // 指定原文件的存放路径
  filename: './index.html',  // 指定生成的文件的存放路径
)

module.exports = 
  mode: 'development',
  plugins: [htmlPlugin],  // 3. 通过plugins节点，使htmlPlugin插件生效

复制代码

3.3 解惑html-webpack-plugin

1. 通过HTML插件复制到项目根目录中的index.html页面，也被放到了内存中

1. HTML插件在生成的index.html页面，自动注入了打包的bundle.js文件

1. devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，示例代码如下：

devServer: 
  open: true,  // 初次打包完成后，自动打开浏览器
  host: '127.0.0.1',  // 实时打包所使用的主机地址
  port: 80,  // 实时打包所使用的端口号

复制代码

注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

作者：热爱编程的通信人
链接：https://juejin.cn/post/7138029382592888863/
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。