详解html-webpack-plugin用法全解

// webpack.config.js
module.exports = {
  entry: path.resolve(__dirname, './app/index.js'),
  output:{
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js'
  }
  ...
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

npm install jade-loader --save-dev

// webpack.config.js
...
loaders: {
  ...
  {
    test: /\.jade$/,
    loader: 'jade'
  }
}
plugins: [
  new HtmlWebpackPlugin({
    ...
    jade: 'path/to/yourfile.jade'
  })
]

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    favicon: 'path/to/yourfile.ico'
  }) 
]

<link rel="shortcut icon" href="example.ico" rel="external nofollow" >

// webpack.config.js
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    minify: {
      removeAttributeQuotes: true // 移除属性的引号
    }
  })
]

<!-- 原html片段 -->
<div id="example" class="example">test minify</div>

<!-- 生成的html片段 -->
<div id=example class=example>test minify</div>

// webpack.config.js
plugins: [
  new HtmlWebpackPlugin({
    ...
    hash: true
  })
]

<script type=text/javascript src=bundle.js"htmlcode">

$ webpack
Hash: 22b9692e22e7be37b57e
Version: webpack 1.13.2


cache


默认值是 true。表示只有在内容变化时才生成一个新的文件。
showErrors


showErrors 的作用是，如果 webpack 编译出现错误，webpack会将错误信息包裹在一个 pre 标签内，属性的默认值为 true ，也就是显示错误信息。
chunks


chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。
chunks 默认会在生成的 html 文件中引用所有的 js 文件，当然你也可以指定引入哪些特定的文件。
看一个小例子。


// webpack.config.js
entry: {
  index: path.resolve(__dirname, './src/index.js'),
  index1: path.resolve(__dirname, './src/index1.js'),
  index2: path.resolve(__dirname, './src/index2.js')
}
...
plugins: [
  new HtmlWebpackPlugin({
    ...
    chunks: ['index','index2']
  })
]



执行 webpack 命令之后，你会看到生成的 index.html 文件中，只引用了 index.js 和 index2.js


...
<script type=text/javascript src=index.js></script>
<script type=text/javascript src=index2.js></script>


而如果没有指定 chunks 选项，默认会全部引用。
excludeChunks


弄懂了 chunks 之后，excludeChunks 选项也就好理解了，跟 chunks 是相反的，排除掉某些 js 文件。 比如上面的例子，其实等价于下面这一行


...
excludeChunks: ['index1.js']


chunksSortMode


这个选项决定了 script 标签的引用顺序。默认有四个选项，'none', 'auto', 'dependency', '{function}'。

  
'dependency' 不用说，按照不同文件的依赖关系来排序。
  
'auto' 默认值，插件的内置的排序方式，具体顺序这里我也不太清楚...
  
'none' 无序？ 不太清楚...
  
{function} 提供一个函数？但是函数的参数又是什么? 不太清楚...

如果有使用过这个选项或者知道其具体含义的同学，还请告知一下。。。


xhtml


一个布尔值，默认值是 false ，如果为 true ,则以兼容 xhtml 的模式引用文件。
总结


以上，就总结完了传入 new HtmlWebpackPlugin() 的选项，了解全部选项的含义后，可以在项目构建时更灵活的使用。希望对大家的学习有所帮助，也希望大家多多支持。