1、下载插件
cnpm i -D html-webpack-plugin
2、引入插件
const X = require('html-webpack-plugin');
3、使用插件
该插件作用:
(1)会自动创建html文件,并自动引入打包后的资源文件
(2)若使用了template指定资源模板后,创建的html会复制该文件
plugins:[
new X(template:'要复制的指定html模板文件路径')
]
输出文件的文件名称,默认为index.html
4、压缩html代码
plugins:[
new X({
template:'要复制的指定html模板文件路径'
minify: {
collapseWhitespace: true, 折叠空格
removeComments:true 移除注释
}
}),
其他额外参数:
new X({
template:'要复制的指定html模板文件路径',
templateContent: string|function,可以指定模板的内容,不能与template共存。配置值为function时,可以直接返回html字符串,也可以异步调用返回html字符串。
filename:输出文件的文件名称,默认为index.html,
hash:true, 给引用文件添加hash值
inject:'body',
true || 'head' || 'body' || false将所有资产注入到给定的template或templateContent中。
body',所有javascript资源将被放置在body元素的底部。
head,将把脚本放置在head元素中。
true,将把它添加到头部/主体。
false,将禁用自动注射。—请参见inject:false示例
chunks:['app'], 允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中
使用于多页面打包
excludeChunks:['app'], 排除注入的chunk
chunksSortMode:'auto' 引入资源的顺序
'none' | 'auto' | 'manual' | {Function}
'manual' 手动排序,即根据entry中的顺序进行引入
minify: {
collapseWhitespace: true, 折叠空格
removeComments:true, 移除注释
html5:true,
minifyCSS:true,
minifyJS:true,
}
}),
]
代码示例:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path:path.resolve(__dirname,'build')
},
module: {
rules: [//创建模块时,匹配请求的规则数组。这些规则能够修改模块的创建方式。这些规则能够对模块(module)应用 loader,或者修改解析器(parser)。
{
test: /\.css$/, //匹配文件名
use: [//使用哪些loader
'style-loader', //创建style标签,将js中的css样式资源添加到style标签中生效
'css-loader', //css文件变成commonjs模块,里面内容是样式字符串
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader', //将less文件编译成css文件
]
}
]
},
//插件
plugins: [
new HtmlWebpackPlugin({
template:'./src/index.html', //将模板复制成指定文件
minify: {
collapseWhitespace: true, //折叠空格
removeComments:true //移出注释
}
}), //默认传键html文件,并引入打包输出的资源,默认为基本结构
],
mode:'development'
}