webpack|webpack插件篇 javascript|前端

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' //}), ] }

【webpack|webpack插件篇】ExtractTextPlugin.extract参数解释：
use:指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
fallback:编译后用什么loader来提取css文件（这里表示不提取的时候，使用什么样的配置来处理css）
publicfile:用来覆盖项目路径,生成该css文件的文件路径
ExtractTextPlugin 参数说明：
filename：生成文件的文件名，可以包含 [name], [id], [contenthash]
allChunks：当为false的时候，只会提取初始化的时候引入的css,当allChunks属性为true时，会把异步引入的css也提取出来。