Question

我是Webpack的新手，我在一个小项目上使用scss和vue。我尝试将所有.scss文件编译成css并将它们捆绑在一个自动注入头部的bundle.css中（我已经设置了sass和css加载器来实现捆绑到css）。但我也希望我的vue app.js包在主体的末尾，也是由htmlWebpackPlugin注入（已经完成）。使用单个HtmlWebpackPlugin将所有内容放入我的index.html中会让我看到正文中的样式或头部的javascript。

我的第一个猜测是，我必须定义2个插件实例，如

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的另一个插件？由于我在加载器中没有test，我不知道该怎么做

所以这个问题的重点是，有人可以解释我如何实现我的css-bundle被注入头部并且我的js-bundle被注入体内？（赞赏如何在webpack-config中执行此操作的代码片段）

Answer 1

您需要HtmlWebpackInjector

它与HtmlWebpackPlugin配合使用，只需在块名称中添加_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块插入到html文档的正文中，并将bundle_head插入到html文档的开头。最终的html看起来像：

<!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

1 个答案: