webpack插件

最新推荐文章于 2025-05-28 17:59:41 发布

柒灬

最新推荐文章于 2025-05-28 17:59:41 发布

阅读量165

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_44442911/article/details/124923158

版权

本文介绍了webpack中的插件，如webpack-dev-server提供自动打包和构建功能，html-webpack-plugin用于自定义HTML页面内容。还讨论了webpack配置文件的输出路径，并在使用webpack-dev-server时，打包文件位于内存中以提高性能。最后，提到了通过devServer节点优化打包过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webpack 中的插件

通过安装和配置第三方插件，可以扩展webpack的能力，从而让webpack用起来更加方便

webpack-dev-server
- 类似于node.js阶段用到的nodemon工具
- 每当修改了源代码，webpack会自动进行项目的打包和构建
html-webpack-plugin
- webpack中的HTML插件（类似于一个模板引擎）
- 可以通过此插件自定义index.html页面内容

webpack-dev-server

它会启动一个实时打包的http服务器，当代码修改时会自动重新打包构建

修改package.json文件中的srcipt节点，

"scripts":{
	"dev":"webpack serve "
}
//之后直接运行npm run dev 来重新进行项目的打包处理

打包配置文件的去向

不配置webpack-dev-server的情况下，webpack打包生成的文件会存放在实际的物理磁盘中
- 严格遵守开发者在webpack.config.js中指定配置
- 根据output节点指定路径进行存放
配置了webpack-dev-server之后，打包生成的文件放在了内存中（默认放在了项目根目录中，虚拟、不可见导入时路径是/bundle.js）
- 不在根据output节点指定的路径，
- 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

html-webpack-plugin

webpack.config.js中配置使得项目运行直接运行index.js

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

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

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

//创建插件实例对象
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html',//指定源文件地址
    filename: './index.html',//指定生成文件地址

})
module.exports = {
     plugins:[htmlPlugin]
}

优化打包过程

devServer节点

在webpack.config.js文件中，通过devServer节点配置

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