首页 > Webpack 的 HtmlWebpackPlugin 如何控制某个 chunks 的 inject 位置?

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

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

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

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


呃…… 还是通过修改 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);
  }
}

// ...
【热门文章】
【热门文章】