文章目录

1. webpack 插件的作用
2. webpack-dev-server
- 2.1 安装 webpack-dev-server
- 2.2 配置 webpack-dev-server
- 2.3 打包生成的文件哪儿去了？
- 2.4 生成到内存中的文件该如何访问？
3. html-webpack-plugin
- 3.1 安装 html-webpack-plugin
- 3.2 配置 html-webpack-plugin
- 3.3 解惑 html-webpack-plugin
4. devServer 节点
5. 完整的实例代码如下

1. webpack 插件的作用

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

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

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

2. 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

① 修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {"dev": "webpack serve",
}

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

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

注意：webpack-dev-server 会启动一个实时打包的 http 服务器
只要修改代码，就会被这个插件所监听到

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

① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
⚫ 严格遵守开发者在 webpack.config.js 中指定配置
⚫ 根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
⚫ 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
⚫ 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

所以在配置了打包插件后，根目录文件下看不到生成的 bundle.js （本质上是main.js，打包插件把main.js 加载到内存当中改名为 bundle.js），但能访问到，这是因为存放到内存当中了

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

webpack-dev-server 生成到内存中的文件，默认是放到了项目的根目录中，而且是虚拟的、不可见的。
⚫ 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
⚫ 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

所以把 index.html 引入内存中的 bundle.js （本质还是 /dist/main.js ）
把 index.js 改成红黑交替
访问 http://localhost:8080/src/，发现可以实时变化

3. 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

3.3 解惑 html-webpack-plugin

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

运行 npm run dev 后，在 8080 端口下就能直接访问到项目中的 index.html
访问根路径下的 src 目录，也能访问到项目，说明 html-webpack-plugin 把 src 下的 index.html 文件复制一份到根路径下了
在根路径下并没有看到复制出的 index.html文件，说明被放到内存当中了

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

把引入的 bundle.js 文件注释掉，但还能在页面中看到效果
查看网页源代码，发现 html-webpack-plugin 插件会自动注入打包后的 bundle.js 文件，所以后面打包后就不需要手动注入 bundle.js 文件了

4. devServer 节点

在每一次打包后，都要手动打开浏览器输入 8080 端口才能看到页面，有点麻烦
在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置

5. 完整的实例代码如下

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
<!--    <script src="../dist/main.js"></script>-->
<!--    <script src="/bundle.js"></script>-->
</head>
<body><ul><li>这是第 1 个 li</li><li>这是第 2 个 li</li><li>这是第 3 个 li</li><li>这是第 4 个 li</li><li>这是第 5 个 li</li><li>这是第 6 个 li</li><li>这是第 7 个 li</li><li>这是第 8 个 li</li><li>这是第 9 个 li</li></ul>
</body>
</html>

index.js

//1.使用 ES6 导入语法，导入 JQuery
import $ from 'jquery'//2.定义JQuery的入口函数
$(function () {//3.实现奇偶数变色$('li:odd').css('background-color', 'red')$('li:even').css('background-color', 'pink')
})

package.json

{"name": "change-rows-color","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack serve"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.6.0"},"devDependencies": {"html-webpack-plugin": "^5.3.2","webpack": "^5.42.1","webpack-cli": "^4.9.0","webpack-dev-server": "^3.11.2"}
}

webpack.config.js

//1. 导入 HTML 插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')
//2. 创建 HTML 插件的对象实例
const htmlPlugin = new HtmlPlugin({template: './src/index.html', //指定原文件存放路径filename: './index.html' //指定生成的文件的存放路径
})//使用 node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {//代表 webpack 运行的模式，可选值有两个， development  productionmode: 'development',entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径output: {path: path.join(__dirname, './dist'), //输出文件的存放路径filename: 'bundle.js' //输出文件的名称},plugins: [htmlPlugin], //通过 plugins 节点，使 htmlPlugin 插件生效devServer: {open: true, //初始打包完成后，自动打开浏览器host: '127.0.0.1', //实时打包所使用的主机地址port: 80 //实时打包所使用的端口号}
}

webpack常用插件相关推荐

【webpack】webpack 常用插件集合
1. extract-text-webpack-plugin webpack默认会将css当做一个模块打包到一个chunk中,extract-text-webpack-plugin的作用就是将css提 ...
VScode前端开发常用插件
1,HTML Snippets 快速的生成html标签-H5代码片段以及提示 2.HTML CSS support 自动补齐css 3.jQuery Code Snippets 4.vscode-ic ...
Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件动态生成html文件并自动引入js文件静态文件无需加载js或css文件,通过设置入口文件可以将 ...
Webpack 常用知识点总结
Webpack 常用知识点总结 webpack 是一个模块打包器.webpack 的主要目标是将 javaScript 文件打包在一起,打包后的文件用于在浏览器中使用,但它也能够胜任转换(transf ...
【Vue】Vue学习笔记——UI组件库和常用插件
文章目录 6. UI组件库和常用插件 6.1 Element-ui 6.2 Vue-router 6.2.1 基本用法 6.2.2 跳转 6.2.3 路由嵌套 6.2.4 路由参数传递 6.3 Axi ...
【编辑器】VScode 常用插件推荐
1. vscode 简介 vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器. 当前市面上常用的轻型代码编辑器主要是:sublime ...
Rollup常用插件详解
文章目录系列文章 @rollup/plugin-node-resolve Options extensions @rollup/plugin-commonjs @rollup/plugin-babe ...
PostCSS及其常用插件介绍
前几天,PostCSS 6.0 分布了. PostCSS 处理了很多你不必处理的乏味工作.它很巧妙的不同于预处理器,提供了可选的且更简洁的编程语言,来编译成 CSS,如 Sass.Less 与 Sty ...
Sublime Text 3便携版下载安装和常用插件安装--顺便解决报错An error occured installing和no packages available for install
文章目录 Sublime Text 3便携版下载安装和常用插件安装 1.Sublime Text 3便携版下载: 2.sublime 插件控制器(Package Control)安装 2.1离线安装P ...
Flutter开发之常用插件安装与卸载（11）
和大多数 IDE 一样,VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件. VS Code 左侧菜单栏处箭头 1 处:打开Extensions MarketPlace 使用搜索功能 ...

webpack常用插件