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')
})
相关推荐
阿山同学.11 分钟前
AWS 亚马逊 S3存储桶直传 前端demo 复制即可使用
前端·javascript·aws
Jolyne_20 分钟前
grid 实现完美的水平铺满、间隔一致的自适应布局
前端·css
西洼工作室24 分钟前
【解决导航栏字体图标渲染导致文本闪烁问题】采用腾讯视频的解决方案
前端·css·css3
WindrunnerMax31 分钟前
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
前端·架构·github
CodeSheep37 分钟前
宇树科技,改名了!
前端·后端·程序员
Hilaku44 分钟前
为什么我们用了 Vite 还是构建慢?——真正的优化在这几步
前端·javascript·vite
XI锐真的烦1 小时前
横向对比npm和yarn
前端·npm·node.js
国家不保护废物1 小时前
🧩 React 组件化进阶:像乐高大师一样搭建你的应用世界!
前端·react.js·ai编程
TimelessHaze1 小时前
从"切图崽"到前端工程师:React 到底是个啥?🚀
前端·react.js·ai编程
站在风口的猪11081 小时前
《前端面试题:CSS的display属性》
前端·css·html·css3·html5