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')
})
相关推荐
bitbitDown4 分钟前
重构缓存时踩的坑:注释了三行没用的代码却导致白屏
前端·javascript·vue.js
xiaopengbc8 分钟前
火狐(Mozilla Firefox)浏览器离线安装包下载
前端·javascript·firefox
用户0165238444129 分钟前
Webpack5 入门与实战,前端开发必备技能无密
前端
小高00729 分钟前
🔥🔥🔥前端性能优化实战手册:从网络到运行时,一套可复制落地的清单
前端·javascript·面试
古夕32 分钟前
my-first-ai-web_问题记录01:Next.js的App Router架构下的布局(Layout)使用
前端·javascript·react.js
Cecilialana36 分钟前
在安装 node-sass 时出现的编译问题
webpack·node.js
杨超越luckly37 分钟前
HTML应用指南:利用POST请求获取上海黄金交易所金价数据
前端·信息可视化·金融·html·黄金价格
Jerry42 分钟前
Compose 中的基本布局
前端
Hilaku1 小时前
深入WeakMap和WeakSet:管理数据和防止内存泄漏
前端·javascript·性能优化
Juchecar1 小时前
常见的 HTML 标签及 CSS 选择器速查表
前端