如何使用webpack html插件在head和js bundle中注入css bundle [英] how to inject css bundle in head and js bundle in body using webpack html plugin
问题描述
我是Webpack的新手，我在一个小项目上使用scss和vue。
我尝试将所有.scss文件编译成css并将它们捆绑在一个自动注入头部的bundle.css中（我已经设置了sass和css加载器来实现捆绑到css） 。但我也希望我的vue app.js包在主体的末尾，也是由htmlWebpackPlugin注入（已经完成）。
使用单个HtmlWebpackPlugin将所有内容放入我的index.html中会让我看到正文中的样式或头部的javascript。
I am absolutely new to Webpack and I work with scss and vue on a little project. What I try is to compile all my .scss files to css and bundle them up in a bundle.css that is automatically injected into the head (I already set up the sass and css loaders to archieve the bundling to css). But I also want my vue app.js bundle at the end of the body, also injected by the htmlWebpackPlugin (already done). Using a single HtmlWebpackPlugin to put everything in my index.html would leave me with either the style in the body or the javascript in the head.
我的第一个猜测是，我必须定义2个插件实例，如
My first guess would be, that I have to define 2 Plugin-Instances like
var jsInjectorPlugin = new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'body'
});
var cssInjectorPlugin = new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: 'head'
})
但是如何告诉webpack，使用css的第一个插件和js的另一个插件？由于我在装载机中没有测试，我不知道该怎么做
But how do I tell webpack, to use the first plugin for css and the other one for js? Since I have no test like in loaders, I do not know how to do this
所以这一点问题是，有人可以解释我如何实现我的css-bundle被注入头部并且我的js-bundle被注入体内？
（在webpack-config中如何执行此操作的代码片段表示赞赏）
So the point of this question is, can someone explain me how I can achieve that my css-bundle gets injected into the head and my js-bundle gets injected in the body? (code snippets of how to do this in the webpack-config are appreciated)
推荐答案
- 它适用于
HtmlWebpackPlugin，只需在块名称中添加_head，它就会自动注入大块在头脑中。
- It works with
HtmlWebpackPluginand by just adding_headin the name of chunk, it automaticlly injects the chunk in the head.
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInjector = require('html-webpack-injector');
module.exports = {
entry: {
index: "./index.ts",
// add "_head" in the bundle name to inject in head.
// use sass and css loaders to compile sass to js bundle.
bundle_head: "./index.scss"
},
output: {
path: "./dist",
filename: "[name].bundle.js"
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "./dist/index.html",
chunks: ["index", "bundle_head"]
}),
new HtmlWebpackInjector()
]
}
这会自动向主体注入 index 块并且 bundle_head 到html文档的头部。最终的HTML看起来像：
This automatically injects index chunk to the body and bundle_head to the head of the html document. Final html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Archit's App</title>
<script type="text/javascript" src="bundle_head.bundle.js"></script> <--injected in head
</head>
</head>
<body>
<script src="index_bundle.js"></script> <--injected in body
</body>
</html>
这篇关于如何使用webpack html插件在head和js bundle中注入css bundle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
