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')
})
相关推荐
前端加油站15 小时前
Chrome/Firefox 浏览器扩展开发完整指南
前端·chrome
码途进化论15 小时前
从Chrome跳转到IE浏览器的完整解决方案
前端·javascript
笙年15 小时前
Vue 基础配置新手总结
前端·javascript·vue.js
哆啦A梦158815 小时前
40 token
前端·vue.js·node.js
炫饭第一名15 小时前
Cursor 一年深度开发实践:前端开发的效率革命🚀
前端·程序员·ai编程
摇滚侠15 小时前
Vue 项目实战《尚医通》,获取挂号医生的信息展示,笔记43
前端·javascript·vue.js·笔记·html5
晴殇i15 小时前
关于前端基础快速跨入鸿蒙HarmonyOS开发
前端·harmonyos
k093315 小时前
vue3中基于AntDesign的Form嵌套表单的校验
前端·javascript·vue.js
没头脑和不高兴y16 小时前
Element-Plus-X:基于Vue 3的AI交互组件库
前端·javascript
ErMao16 小时前
Proxy 与 Reflect:最硬核、最实用的解释
前端·javascript