Webpack将js/css文件内容直接注入到index.html

2024-05-12

我有这样的代码

<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="path_to_css/some_css.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        ...
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="jquery/jquery.min.js"></script>
    </body>
</html>

我需要插件/加载器或其他方式来获取我的 html 文件,并将链接和脚本标记替换为该文件的内容,有什么方法可以做到吗?

最后我写了自己的插件来满足我的需求包含文件 webpack 插件 https://www.npmjs.com/package/include-file-webpack-plugin


它实际上可以通过以下方式完成:

  1. npm i --save-dev css-loader to-string-loader
  2. 配置你的 webpack

    module: [
        rules: [
          {
            test: /\.css$/,
            use: ['to-string-loader', 'css-loader']
          }
        ]
      }
    
  3. 然后在你的项目中你可以像这样访问 css 作为字符串

    const cssContent= require('path_to_css/some_css.css'); console.log('your css is: ', cssContent.toString());

    • 或者您可能想使用以下命令将其手动注入到页面中:

      const boostrap= require('bootstrap/dist/css/bootstrap.min.css');
      let style= document.createElement('style');
      style.id= 'boostrap';
      style.setAttribute('type', 'text/css');
      style.innerHTML= boostrap.toString();
      document.body.appendChild(style);
      

参考

  1. 注入 CSS 样式表 https://stackoverflow.com/questions/15505225/inject-css-stylesheet-as-string-using-javascript
  2. CSS加载器 https://github.com/webpack-contrib/css-loader
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Webpack将js/css文件内容直接注入到index.html 的相关文章

  • 使用 ScriptEngine 从 JavaScript 调用 Java 方法

    我正在使用 ScriptEngine 运行 JavaScript 我希望 JavaScript 脚本能够调用 myFunction 其中 myFunction 是我的给定类中的一个方法 我知道可以将 importPackage 用于标准 J
  • Jest 中从未调用图像 onLoad 处理程序

    我正在尝试使用 Jest 测试将 dataUrl 加载到图像中 我正在使用 JSDOM 并按照说明添加resources usable 作为一个选项 如果我直接从 Node 运行该代码 则该代码可以工作 但是当我尝试在 Jest 中运行它时
  • Jqplot 中两个系列数据的不同颜色条

    我想知道如何在 Jqplot 中为两个系列制作不同的颜色条 如果我只有一个系列数据 它的工作原理如下图所示 红色和绿色基于其值 但是 如果我有两个系列数据 我无法为每个系列数据配置两个系列颜色 目前我只能做这个图 我希望两个系列图可以根据其
  • 全局 JavaScript 变量作用域:为什么这不起作用?

    所以我在玩 JavaScript 时遇到了我认为奇怪的事情 有谁能解释一下以下内容吗 我已将警报值作为评论包含在内 为什么 foo 中的第一个警报 msg 返回不明确的并不是outside var msg outside function
  • Ember.js 数组作为模型的属性

    干杯 我有一些模型 它的一个属性是一个数组 但由于某些原因 我在服务器上使用 mongoDB 并且它是嵌入式模型和 ember data 的问题 我不能做这样的事情 App Foo DS Model extend numbers DS ha
  • 为什么 JSON.stringify() 接受 Date 对象?

    至少在 Firefox 中 您可以对 Date 对象进行字符串化 gt gt gt JSON stringify now new Date now 2012 04 23T18 44 05 600Z 这是有效的 因为 在 Firefox 中
  • Javascript 根据字段值任意排序数组

    所以我有一个对象数组 如下所示 var myArray priority low priority critical priority high 我需要以这种方式排序 1 关键 2 高和3 低 如何才能做到这一点 我建议使用一个对象来存储排
  • contenteditable 在 safari 中不起作用,但在 chrome 中起作用

    我有一个奇怪的问题 这在 chrome 中按预期工作 但在 safari 中它只会发光 但不会对按键输入做出反应 这是触发文本版本的方法 var namebloc event currentTarget find column filena
  • 表单提交不起作用

    我有一张桌子 可以打印出所有可用的相机 它使用表单来更改这些设置 问题在于该表单仅更新条目中的最后一个摄像机 换句话说 如果我更改表单并为列表中的最后一个摄像机点击 应用 它将起作用 如果我更改此列表中任何其他摄像机的表单 它会将其更改为与
  • JQuery _renderItem 没有被调用

    我正在尝试使用 renderItem 函数创建自定义 ui menu item 元素 但经过可能尝试后 我什至无法调用该函数 自动完成功能正在工作 但就像 renderItem 函数不存在一样 这是我的脚本部分
  • Django 模板变量从 {% for %} 循环到 Javascript

    这是一个迭代记录的 Django 模板 每条记录都包含一个由 JS 函数填充的 div 为了让 JS 知道要做什么 它需要从每次 for 循环迭代中获取一个变量并使用它 我不知道具体如何实现这一目标或是否可能 我不知道 也许记录在单独的 J
  • 将 async/await 与 webpack-simple 配置一起使用会引发错误:RegeneratorRuntime 未定义

    我正在使用具有以下配置的 webpack simple 模板 包 json name vue wp simple description A Vue js project version 1 0 0 author v private tru
  • 从 UnityWebGL jslib 返回字符串

    我想使用 jslib 来获取网址参数 像这样的代码 jslib GetUrl function var s var strUrl window location search var getSearch strUrl split var g
  • 如何混淆或使 JavaScript 文件不可读?

    我的应用程序中有 JavaScript 脚本 其中包含 JavaScript 和 jQuery 函数 所有用户与我的应用程序的交互都是动态的 并且通过 jQuery 传递到应用程序 我意识到 当我在客户端运行我的应用程序时 客户端可以通过查
  • Flot 0.8.2 折线图 - 颜色错误

    我正在使用 Flot 折线图并设置它们的颜色 我发现了一个奇怪的错误 在前 3 种颜色之后 绘图对所有其他线条使用最后一种颜色 这不是正确的行为 更有趣的是图例显示了正确的颜色 这是一个已知的错误 var dataSet label d1
  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中
  • NodeJS 中的缩进多行日志记录

    我要打印JSON stringify d 反对控制台 将上下文作为 Mocha 测试套件输出的一部分 当测试缩进时 我希望对象日志行向右缩进足够远 例如 3 4 个制表符空格 以便它们可以识别地位于右侧describe group 我怎样才
  • Javascript/DOM:如何删除 DOM 对象的所有事件侦听器?

    只是问题 有没有办法完全删除对象的所有事件 例如一个div 编辑 我添加每div addEventListener click eventReturner false 一个事件 function eventReturner return f
  • Webpack:如何使用动态捆绑组合两个完全独立的捆绑包

    我花了很多时间研究这个问题 但毫无结果 我知道代码分割和动态捆绑在 Webpack 中如何使用import承诺API 然而 我的用例是我有两个完全独立的包 使用不同的 webpack 版本分别生成 为了给您提供视角 我正在构建 React
  • 使用重复模式捕获正则表达式

    我试图捕获字符串的所有部分 但我似乎无法正确处理 该字符串具有以下结构 1 22 33 中间有运算符的数字 可以有任意数量的术语 我想要的是 1 22 33 1 22 33 但我得到 1 22 33 22 33 我尝试过各种正则表达式 这是

随机推荐