Webpack 的 HtmlWebpackPlugin 如何控制某个 chunks 的 inject 位置？

Question

项目中某个页面构建引入了多个 chunks:

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: './src/index.jade',
  inject: true,
  chunks: ['chunks1', 'chunks2', 'chunks3', 'vendor']
})

使用现在的配置的话，所有的 JS 文件将会添加到文档尾部，如果想要控制某个 chunk 的位置，比如将 chunks2 放至 head 中。其他还放在文档尾部，要怎样配置？感激不尽！

Answer 1

呃…… 还是通过修改 HtmlWebpackPlugin 源码实现了，单独搞成了个插件.

修改后的配置：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: './src/index.jade',
  inject: {
    head: ['chunks2'],
    body: ['chunks1', 'chunks3', 'vendor']
  },
  chunks: ['chunks1', 'chunks2', 'chunks3', 'vendor']
})

插件修改部分：

// ...

// 如果 inject 传入参数为对象则区分打包.
if (typeof this.options.inject === 'object') {
  this.options.inject.head.forEach(value => {
    var injectScripts = scripts.filter(script => script.attributes.src.indexOf(value) > -1)
    head = head.concat(injectScripts)
  })

  this.options.inject.body.forEach(value => {
    var injectScripts = scripts.filter(script => script.attributes.src.indexOf(value) > -1)
    body = body.concat(injectScripts)
  })
} else {
  // 原版逻辑.
  if (this.options.inject === 'head') {
    head = head.concat(scripts);
  } else {
    body = body.concat(scripts);
  }
}

// ...

Answer 2

可以在模板里添加
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
然后
inject: false

参考https://github.com/jaketrent/...

Answer 3

https://github.com/jaketrent/...

有帮助

Answer 4

new HtmlWebpackPlugin({
    ...
    chunksSortMode: 'manual'
})