webpack中的插件
2022/9/2 6:23:05
本文主要是介绍webpack中的插件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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
运行如下的命令,即可在项目中安装此插件:
npm install webpack-dev-server@3.11.2 -DView Code
2.配置webpack-dev-server
1.配置package.json - >scripts中的dev命令如下:
'script':{ 'dev':'webpack serve',//script 节点下的脚本,可以通过npm run执行 }View Code
2.再次运行npm run dev 命令,重新进行项目打包
3.在浏览器中访问 http://localhost:8080地址,查看自动打包效果
注意:webpack-dev-server会启动一个实时打包的http服务器
3.安装html-webpack-plugin
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
运行如下的命令,即可在项目中安装此插件:
View Code
2.配置webpack-dev-server
1.配置package.json - >scripts中的dev命令如下:
View Code2.再次运行npm run dev 命令,重新进行项目打包
3.在浏览器中访问 http://localhost:8080地址,查看自动打包效果
注意:webpack-dev-server会启动一个实时打包的http服务器,bundle文件会被放到内存里边,JS加载引用路径应该修改为/bundle.js,页面访问路径为:服务器/src
3.安装html-webpack-plugin
运行如下的命令,即可在项目中安装此插件:npm install html-webpack-plugin@5.3.2 -D
- 配置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插件生效 }
- html-webpack-plugin的特性
- 可以自己引用JS到html
- 可以把Html复制到内存中的根目录里边
4.devServer节点
在webpack.config.js配置文件中,可以通过devServer节点对webpack-dev-server插件进行更多的配置,
实例代码如下:
devServer:{ open:true,//初次打包完成后,自动打开浏览器 host:'127.0.0.1',//实时打包使用的主机地址 port:80,//实时打包所使用的端口号 }
注意:凡是修改了webpack.config.js配置文件,或修改了package.json配置文件,必须要重启实时打包的服务器,否则最新的配置文件无法生效
这篇关于webpack中的插件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升