webpack版本:
v4.x
webpack的plugin的配置很简单,plugins配置项接收一个数组,数组里的每一项都是一个要使用的plugin的实例,plugin需要的参数通过构造函数传入。
HtmlWebpackPlugin插件作用
1:为html文件引入外部资源,如css,js,动态添加每次compile后的hash,防止引用缓存的外部文件问题
2:可以生成创建html入口文件,比如单页面可以生成一个html入口文件,那要是多个页面就配置多个html-webpack-plugin可以生成多个页面入口
htmlWebpackPlugin的配置项:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
//插件
plugins: [
//new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({
//文件title标签标题
title:"test",
//输出的文件名称
filename:"test.html",
//来源于的模板名称,这里的模板类型可以是任意你喜欢的模板,
//可以是 html,jade, ejs, hbs, 等等,但是要注意的是,
//使用自定义的模板文件时,需要提前安装对应的 loader,
//否则webpack不能正确解析。如果你设置的 title 和 filename
//于模板中发生了冲突,那么以你的title 和 filename 的配置值为准。
template:"./src/index.html",
//true: script脚本文件是否位于body底部
//body:script标签位于html文件的 body 底部(同 true)
//head:script 标签位于 head 标签内
//false:不插入生成的 js 文件,只是单纯的生成一个 html 文件
inject:true,
//给生成的 html 文件生成一个 favicon,属性值为 favicon 文件所在的路径名
favicon:"",
//minify的作用是对html文件进行压缩,minify的属性值是一个压缩选项或
//false,默认值为false, 不对生成的 html 文件进行压缩。
minify:{
//是否对大小写敏感,默认false
caseSensitive: true,
//是否简写boolean格式的属性如:disabled="disabled" 简写为disabled 默认false
collapseBooleanAttributes: true,
//是否去除空格,默认false
collapseWhitespace: true,
//是否压缩html里的css(使用clean-css进行的压缩) 默认值false;
minifyCSS: true,
//是否压缩html里的js(使用uglify-js进行的压缩)
minifyJS: true,
//Prevents the escaping of the values of attributes
preventAttributesEscaping: true,
//是否移除属性的引号 默认false
removeAttributeQuotes: true,
//是否移除注释 默认false
removeComments: true,
//从脚本和样式删除的注释 默认false
removeCommentsFromCDATA: true,
//是否删除空属性,默认false
removeEmptyAttributes: true,
// 若开启此项,生成的html中没有 body 和 head,html也未闭合
removeOptionalTags: false,
//删除多余的属性
removeRedundantAttributes: true,
//删除script的类型属性,在h5下面script的type默认值:text/javascript 默认值false
removeScriptTypeAttributes: true,
//删除style的类型属性, type="text/css" 同上
removeStyleLinkTypeAttributes: true,
//使用短的文档类型,默认false
useShortDoctype: true,
},
//minify:false,
//哈希加密的文件结尾
hash : true,
//默认是true的,表示内容变化的时候生成一个新的文件。
cache:true,
//如果webpack编译出现错误,webpack会将错误信息包裹在一个 pre 标签内,
//属性的默认值为 true ,也就是显示错误信息。开启这个,方便定位错误
showErrors:true,
//chunks主要用于多入口文件,当你有多个入口文件,
//那就回编译后生成多个打包后的文件,那么chunks 就能选择你要使用那些js文件
//编译后:
//<script type=text/javascript src="index.js"></script>
//<script type=text/javascript src="main.js"></script>
chunks:['index','main'],
//排除掉一些js,
excludeChunks: ['devor.js']
}),
new AddAssetHtmlPlugin([
{ filepath : require.resolve('./src/jquery.min') }
]),
],
}