javascript-如何使用webpack html插件在头部注入css包和在体内注入js包

2019-10-11 14:38:24 阅读：744 来源： 互联网

标签：javascript css webpack bundle webpack-html-loader

我绝对不是Webpack的新手,我在一个小项目上使用scss和vue.
我想做的是将我所有的.scss文件编译为css,并将它们捆绑在bundle.css中,然后将其自动注入到头部(我已经设置了sass和css加载程序,将捆绑文件归档到css中).但是我也希望将我的vue app.js包放在主体的末尾,也由htmlWebpackPlugin注入(已经完成).
使用单个HtmlWebpackPlugin将所有内容都放入我的index.html中,将使我的身体样式或头部的javascript保持不变.

我的第一个猜测是,我必须定义2个Plugin-Instances

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？由于我没有像装载机那样的测试,所以我不知道该怎么做

因此,这个问题的重点是,有人可以向我解释我如何实现将css-bundle注入头部而将js-bundle注入体内吗？
(赞赏如何在webpack-config中执行此操作的代码段)

解决方法:

您需要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()
  ]
}

这会自动将索引块注入到主体,并将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>

标签：javascript,css,webpack,bundle,webpack-html-loader
来源： https://codeday.me/bug/20191011/1893440.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-如何使用webpack html插件在头部注入css包和在体内注入js包