webpack:关于处理html文件的插件html-webpack-plugin、add-asset-html-webpack-plugin

简介

add-asset-html-webpack-plugin 将 JavaScript或CSS文件添加到由html-webpack-plugin插件生成的HTML中去。

html-webpack-plugin

默认配置会在出口目录中(通过output.path选项配置)生成一个index.html文件;

生成的index.html文件将会以script标签的形式引入每一个输出js文件(通过output.filename选项配置)。

js 复制代码
new HtmlWebpackPlugin({
  // 引入项目的根HTML文件
  template: path.join(__dirname,'./public/index.html'),
  minify: {
    // 移除空格
    collapseWhitespace: true,
    // 移除注释
    removeComments: true
  }
})

add-asset-html-webpack-plugin

将静态资源插入到 html 中

js 复制代码
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin')

// 配合dll, 引入dll中已经压缩的库
new AddAssetHtmlWebpackPlugin({
  filepath: resolve(__dirname, 'dll/jquery.js')
})
相关推荐
余人于RenYu2 小时前
Claude + Figma MCP
前端·ui·ai·figma
杨艺韬5 小时前
vite内核解析-第2章 架构总览
前端·vite
我是伪码农6 小时前
外卖餐具智能推荐
linux·服务器·前端
2401_885885046 小时前
营销推广短信接口集成:结合营销策略实现的API接口动态变量填充方案
前端·python
小李子呢02116 小时前
前端八股性能优化(2)---回流(重排)和重绘
前端·javascript
程序员buddha7 小时前
深入理解ES6 Promise
前端·ecmascript·es6
吴声子夜歌7 小时前
ES6——Module详解
前端·ecmascript·es6
剪刀石头布啊7 小时前
原生form发起表单干了啥
前端
剪刀石头布啊7 小时前
表单校验场景,如何实现页面滚动到报错位置
前端
gyx_这个杀手不太冷静7 小时前
大人工智能时代下前端界面全新开发模式的思考(二)
前端·架构·ai编程