项目中某个页面构建引入了多个 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);
}
}
// ...