html-webpack-plugin
作用:
- 为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题
- 可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口
(将 webpack中entry
配置的相关入口chunk 和extract-text-webpack-plugin
抽取的css样式 插入到该插件提供的template
或者templateContent
配置项指定的内容基础上生成一个html文件,具体插入方式是将样式link
插入到head
元素中,script
插入到head
或者body
中。)
安装:npm install html-webpack-plugin --save-dev
使用:在webpack.config.js中引入
{
entry: 'index.js',
output: {
path: 'dist',
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'My',
filename: 'admin.html',
template:'header.html',
inject: 'body',
favicon:'./images/favico.ico',
minify:true,
hash:true,
cache:false,
showErrors:false,
"chunks": {
"head": {
"entry": "assets/head_bundle.js",
"css": [ "main.css" ]
},
excludeChunks: [],
xhtml:false
})
]
}
参数说明
title: 设置title的名字
filename: 设置这个html的文件名
1、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的,不是相对于当前项目目录结构的。
2、指定生成的html文件内容中的link和script路径是相对于生成目录下的,写路径的时候请写生成目录下的相对路径。
template:要使用的模块的路径 (本地模板文件的位置,支持加载器(如handlebars、ejs、undersore、html等),如比如 handlebars!src/index.hbs;)
1、template配置项在html文件使用file-loader时,其所指定的位置找不到,导致生成的html文件内容不是期望的内容。
2、为template指定的模板文件没有指定任何loader的话,默认使用ejs-loader。如template: ‘./index.html’,若没有为.html指定任何loader就使用ejs-loader
templateContent: string|function,可以指定模板的内容. 配置值为function时,可以直接返回html字符串,也可以异步调用返回html字符串。
注意:template不能跟templateContent共存
inject: 向template或者templateContent中注入所有静态资源,把模板注入到哪个标签后
参数: 1、true或者body:所有JavaScript资源插入到body元素的底部
2、head: 所有JavaScript资源插入到head元素中
3、false: 所有静态资源css和JavaScript都不会注入到模板文件中
favicon: 添加特定favicon路径到输出的html文档中,这个同title配置项,需要在模板中动态获取其路径值
minify:是否压缩 {…} | false 传递 html-minifier 选项给 minify 输出,false就是不使用html压缩
hash: true|false ,
表示是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值,添加hash形式如下所示:
html
cache:是否缓存,
showErrors:是否显示错误信息,便于调试,
chunks: 允许插入到模板中的一些chunk,不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时,每个页面注入的thunk应该是不相同的,需要通过该配置为不同页面注入不同的thunk;
excludeChunks: 这个与chunks配置项正好相反,用来配置不允许注入的thunk。
xhtml:是否渲染link为自闭合的标签,true则为自闭合标签. 默认false
extract-text-webpack-plugin
作用:该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象(提取样式插件)【webpack中提取分离css的。】
如果不去分离css的内容都被打包到bundle.js里面了。
无论修改了js部分的代码,css模块也会被重新打包,被当成css模块也有内容修改,或者只修改了css模块,js模块是没有变化的,但是他们都是在一个bundle中,所以都会被认为有修改。
注意: webpack4 安装extract-text-webpack-plugin必须安装下一代版本
cnpm install extract-text-webpack-plugin @next -save
安装:npm install extract-text-webpack-plugin --save-dev
使用:在webpack.config.js中引入
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader", // 编译后用什么loader来提取css文件
use: "css-loader" // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
})
}
]
},
plugins: [
new ExtractTextPlugin("styles.css"),
//new ExtractTextPlugin({
//filename:'[name].min.css'
//}),
]
}
ExtractTextPlugin.extract参数解释:
use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件(这里表示不提取的时候,使用什么样的配置来处理css)
publicfile:用来覆盖项目路径,生成该css文件的文件路径
ExtractTextPlugin 参数说明:
filename:生成文件的文件名,可以包含 [name], [id], [contenthash]
allChunks:当为false的时候,只会提取初始化的时候引入的css,当allChunks属性为true时,会把异步引入的css也提取出来。