webpack插件篇

html-webpack-plugin

作用：

1. 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
2. 可以生成创建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也提取出来。