Webpack之插件html webpack plugin
Webpack之插件html webpack plugin
html-webpack-plugin插件
动态生成html文件并自动引入js文件
静态文件无需加载js或css文件,通过设置入口文件可以将js文件自动添加进去,而相关的css文件在js中导入
同时修改生成的js文件命名规则,利用hash码命名js文件
没有改动时可以让浏览器缓存内容,当有改动重新部署后可以让浏览器缓存失效
安装
cnpm install html-webpack-plugin --save-dev
复制代码
常用的参数
title
打包生成的html文档的标题
配置该项,它并不会替换指定模板文件中的title元素的内容,除非html模板文件中使用了模板引擎语法来获取该配置项值
template:模板路径
指定你生成的文件所依赖哪一个html文件模板,模板类型可以是html、jade、ejs等
但是要注意的是,如果想使用自定义的模板文件的时候,你需要安装对应的loader
为template指定的模板文件没有指定任何loader的话,默认使用ejs-loader。如template: './index.html',若没有为.html指定任何loader就使用ejs-loader
filename:一般是相对路径
输出文件的文件名称,默认为index.html,还可以为输出文件指定目录位置(例如'html/index.html')
filename配置的html文件目录是相对于webpackConfig.output.path路径而言的,不是相对于当前项目目录结构的
指定生成的html文件内容中的link和script路径是相对于生成目录下的,写路径的时候一般是生成目录下的相对路径
templateContent: string|function
可以指定模板的内容,不能与template共存。配置值为function时,可以直接返回html字符串,也可以异步调用返回html字符串
minify: {....}|false
传递 html-minifier 选项给 minify 输出,false就是不使用html压缩
minify: {collapseWhitespace: true, //打包后是否删除空格(压缩)removeAttributeQuotes: true // 移除属性的引号
},
复制代码
caseSensitive(默认false):以区分大小写的方式处理属性(适用于定制的HTML标记)
collapseBooleanAttributes(默认false):从布尔属性中省略属性值
collapseInlineTagWhitespace Don't leave any spaces between display:inline;elements when collapsing. Must be used in conjunction with collapseWhitespace=true false
collapseWhitespace 在显示之间不要留下任何空格:内联;崩溃时的元素。必须与折叠空间结合使用=true ? false
conservativeCollapse 总是折叠到1个空间(永远不要完全删除它)。必须与折叠空间结合使用=true ? false
customAttrAssign 允许支持自定义属性分配表达式的正则表达式数组。 (e.g. '<div flex?="{{mode != cover}}">') [ ]
customAttrCollapse Regex指定自定义属性以从(例如/ng-class/)删除新行。
customAttrSurround 允许支持自定义属性包围表达式的正则表达式数组(e.g. <input {{#if value}}checked="checked"{{/if}}>) [ ]
customEventAttributes 允许为minifyJS支持自定义事件属性的正则表达式数组(例如,ng-click) [ /^on[a-z]{3,}$/ ]
decodeEntities 尽可能使用直接的Unicode字符。false
html5 根据HTML5规范分析输入。 true
ignoreCustomComments 当匹配时,允许忽略某些注释的正则表达式数组。 [ /^!/ ]
ignoreCustomFragments 当匹配时,允许忽略某些片段的正则表达式数组(例如,{ {…} },等等)。 [ /<%[\s\S]?%>/, /<?[\s\S]??>/ ]
includeAutoGeneratedTags 插入由HTML解析器生成的标记。 true
keepClosingSlash 保留单例元素的末尾斜杠。 false
maxLineLength 指定最大行长度。压缩的输出将在有效的HTML分割点上被换行。
minifyCSS 缩小CSS样式元素和样式属性(usesclean-css) false (could betrue, Object,Function(text))
minifyJS 在脚本元素和事件属性中缩小JavaScript(使用UglifyJS) false (could betrue, Object,Function(text, inline))
minifyURLs 在各种属性中缩小url(使用relateurl) false (could beString, Object,Function(text))
preserveLineBreaks 当标记之间的空格包括换行符时,总是崩溃到1行中断(永远不要完全删除)。必须与折叠空间结合使用=true ? false
preventAttributesEscaping 防止属性值的溢出。 false
processConditionalComments 通过minifier处理条件评论的内容。 false
processScripts 通过minifier(例如text/ng-template、text/x-handlebars-template等)来处理脚本元素类型的字符串数组。 [ ]
quoteCharacter 用于属性值的引用类型('or')
removeAttributeQuotes 在可能的情况下删除引号。 false
removeComments 带HTML注释 false
removeEmptyAttributes 删除所有的属性,只有whitespace-only的值。 false (could betrue,Function(attrName, tag))
removeEmptyElements 删除所有含有空内容的元素。 false
removeOptionalTags 删除可选的标记 false
removeRedundantAttributes 当值匹配默认值时删除属性。 false
removeScriptTypeAttributes 从脚本标签中删除type="text/javascript"。其他类型的属性值是完整的。false
removeStyleLinkTypeAttributes 从style和link标签中删除type="text/css"。其他类型的属性值是完整的。 false
removeTagWhitespace 尽可能在属性之间移除空间。注意,这将导致无效的HTML! false
sortAttributes 根据频率属性进行排序 false
sortClassName 按频率分类样式类。 false
trimCustomFragments 在ignoreCustomFragments周围调整空白区域。 false
useShortDoctype 用short (HTML5) doctype替换doctype。 false
chunks
允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中
在配置多个页面时,每个页面注入的thunk应该是不相同的,需要通过该配置为不同页面注入不同的thunk
chunks主要是选择使用你页面中呀加入的js
plugins: [new httpWebpackPlugin({chunks: ['index','main']})
]
复制代码
那么编译后:
<script type=text/javascript src="index.js"></script>
<script type=text/javascript src="main.js"></script>
复制代码
excludeChunks:排除掉一些js,用来配置不允许注入的thunk
chunksSortMode: none | auto| function,默认auto
允许指定的thunk在插入到html文档前进行排序。
function值可以指定具体排序规则
auto基于thunk的id进行排序
none就是不排序
inject有四个值: true body head false
向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同
true 默认值或body,所有JavaScript资源插入到body元素的底部
head script标签位于html文件的 head中
false 不插入生成的js文件,这个几乎不会用到的
favicon
添加特定favicon路径到输出的html文档中,这个同title配置项,需要在模板中动态获取其路径值
结果是将生成的html文件生成一个 favicon ,值是一个路径 :favicon: 'path/to/my_favicon.ico',然后再生成的html中就有了一个 link 标签
<link rel="shortcut icon" href="example.ico">
复制代码
cache:true|fasle, 默认true
表示内容变化的时候生成一个新的文件
如果为true表示在对应的thunk文件修改后就会emit文件
hash:布尔值,默认false
是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值,添加hash形式如下所示:
html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
复制代码
xhtml: true|fasle, 默认false
是否渲染link为自闭合的标签,true则为自闭合标签
showErrors: true|false,默认true
是否将错误信息输出到html页面中
配置多个html页面例子
应用中配置了三个入口页面:index.html、course.html、about.html;并且每个页面注入的thunk不尽相同;
类似如果多页面应用,就需要为每个页面配置一个;
// 需要暴露在全局(模块的导出)
// __dirname目录就是E:\MyLocalProject\webpackDemo
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {
entry: {general: './src/skin/general/js/general.js',index: './src/skin/index/js/index.js',course: './src/skin/course/js/index.js',about: './src/skin/about/js/index.js',
},
output: {path: path.resolve(__dirname, 'dist'),filename: 'skin/[name]/[name].js', //必须是相对路径publicPath: '../../'
},
module: {rules: [//配置babel,自动编译es6语法{test: /\.js$/,exclude: /(node_modules)/,loader: 'babel-loader'},]
},
//插件的相关配置
plugins: [//配置html文件new htmlWebpackPlugin({template: path.join(__dirname, '/src/static/index.html'),filename: 'static/index.html',minify: {collapseWhitespace: true},hash: true,favicon: 'favicon.ico',chunks: ['general', 'index']}),new htmlWebpackPlugin({template: path.join(__dirname, '/src/static/course/index.html'),filename: 'static/course/index.html',minify: {collapseWhitespace: true,},hash: true,favicon: 'favicon.ico',chunks: ['general', 'course']}),new htmlWebpackPlugin({template: path.join(__dirname, '/src/static/about/index.html'),filename: 'static/about/index.html',minify: {collapseWhitespace: true},hash: true,chunks: ['general', 'about'],favicon: 'favicon.ico'}),
]
}
复制代码
项目目录结构
使用glob 扫描路径,自动配置html
// __dirname目录就是E:\MyLocalProject\webpackDemo
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')//扫描入口目录static的路径
const glob = require("glob");
const staticHtmlPath = glob.sync('src/static/**/*.html');//定义入口对象entrys
const entrys = {};
//设置公共的js入口文件
const commonJSObj = {general: './src/skin/general/js/general.js',
}
Object.assign(entrys, commonJSObj)//定义html-webpack-plugin配置项
const htmlCfgs = [];
const htmlCfgsObj = {};
staticHtmlPath.forEach((filePath) => {let path = filePath.split('/')let pathLength = path.length//获取文件名let filename = path[pathLength - 1].split('.')[0]//动态配置入口文件路径let entryJSName = path[pathLength - 2] + '-' + filenameentrys[entryJSName] = './src/skin/' + path[pathLength - 2] + '/js/' + filename + '.js';htmlCfgs.push( //动态配置入口文件插件new htmlWebpackPlugin({template: filePath,filename: filePath.replace('src', ''),minify: {collapseWhitespace: true},hash: true,favicon: 'favicon.ico',chunks: [entryJSName, 'general'],}))
});module.exports = {devtool: 'inline-source-map',// 入口entry: entrys,// 出口output: {path: path.resolve(__dirname, 'dist'), //必须是绝对路径filename: 'skin/[name]/[name].js', //必须是相对路径publicPath: '../../'},// 开发服务器devServer: {},// 模块配置module: {rules: [//配置babel,自动编译es6语法{test: /\.js$/,exclude: /(node_modules)/,loader: 'babel-loader'},]},//插件配置plugins: htmlCfgs,//配置解析resolve: {}
}
复制代码
参考文章: www.cnblogs.com/wonyun/p/60…
Webpack之插件html webpack plugin相关推荐
- 六、Webpack详解学习笔记——webpack的安装、起步、配置、loader的使用、webpack中配置Vue、plugin的使用、搭建本地服务器、webpack配置的分离
一.认识webpack 什么是webpack? 这个webpack还真不是一两句话可以说清楚的. 我们先看看官方的解释: At its core, webpack is a static module ...
- webpack中的Loaders和plugin
什么是loader? 官方说明webpack 可以使用 loader 来预处理文件.这允许你打包除 JavaScript 之外的任何静态资源. Loader就是一个打包的方案,他知道对于某一个特定的文 ...
- 基于webpack修改插件源码,使用自定义文件替换node_modules里面的源码文件
基于webpack修改插件源码,使用自定义文件替换node_modules里面的源码文件 需求:插件不满足要求,需要修改源码,但又想永远保留自己修改的这份,不想被重新下载的覆盖 方法:在运行时执行你替 ...
- webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
- git 创建webpack项目_使用webpack手动创建一个完整项目的全过程
1.创建文件夹"webpack-study" 2.使用webstrom打开文件夹所在位置.在根目录上创建一个文件,文件命名为"src",在src文件下新建css ...
- webpack 3.1 升级webpack 4.0
webpack 3.1 升级webpack 4.0 为了提升打包速度以及跟上主流技术步伐,前段时间把项目的webpack 升级到4.0版本以上 webpack 官网:https://webpack.j ...
- webpack笔记一:webpack的介绍,安装,加载css、图片、字体等
写在前面的话: 在当前grunt.gulp.webpack成为日常工具的情况下,如果你还只是熟练的使用html.css和激块瑞的话,已经远远不能满足项目的需求,所以你得变强,你需要懂得更多.现在前端不 ...
- 安装truffle的前提条件(nodejs和npm),truffle的webpack案例测试,webpack项目中的报错
truffle安装 Ubuntu20.04下truffle相关组件版本如下: Truffle v5.2.4 (core: 5.2.4) Solidity v0.5.16 (solc-js) Node ...
- webpack 分离css html,webpack分离css并单独打包的方法
这篇文章主要介绍了webpack分离css单独打包的方法,内容挺不错的,现在分享给大家,也给大家做个参考. 本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG ...
最新文章
- 虚拟机非法关机不能重启了
- 花5分钟过一遍jar包和war包的区别,以后都不会再迷茫
- 高铁上的排泄物都哪里去了,真的是“一泻千里”吗?
- java并发总结思维导图
- 20muduo_base库源码分析(十一)
- 4、Windows2008 R2安装Vcenter5.0
- 【CF734F】Anton and School(构造)
- 半导体、芯片、集成电路、无尘车间具体释义及区别
- [源码解析] TensorFlow 分布式环境(6) --- Master 动态逻辑
- jit流线制_JIT精益生产实务四—安定化生产.ppt
- 【其他】Hexo博客(Next主题)放弃多说,接入网易云跟贴
- html分行分列代码,表格内如何强制换行 选中单元格后,点击数据中的分列
- 安全世界里,你不可不知的七名全球顶级白帽黑客
- 一个简单的订单生成器 ---- 20160920
- Java 在PDF中添加骑缝章
- Java基础の乱弹琴二:break关键字
- 【项目实战】C/C++轻松实现4399小游戏:围住神经猫
- 基于JSP的网上手机销售系统
- 交换机与路由器技术-03-交换机基本配置
- Spark Streaming系列-5、应用案例: 百度搜索风云榜