Webpack вставляет содержимое файла js/css непосредственно в index.html

у меня такой код

<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-файл с замененными тегами ссылки и скрипта на содержимое этих файлов, есть ли способ это сделать?

Наконец, я написал собственный плагин, который соответствует моим потребностям include-file-webpack-plugin


webpack javascript webpack-2
person jagwe danfesa    schedule 28.03.2017    source источник
comment
Я бы попробовал html-webpack-plugin.   -  person Paul Kaspriskie    schedule 28.03.2017
comment
этот плагин не может этого сделать, или я не могу сделать это, используя этот плагин, только то, что я хочу, это поместить содержимое файла css в html   -  person jagwe danfesa    schedule 28.03.2017
comment
@jagwedanfesa Я думаю, вам нужно снова прочитать документы.   -  person Leo    schedule 29.03.2017

Ответы (1)


arrow_upward
5
arrow_downward

На самом деле это можно сделать с помощью:

  1. npm i --save-dev css-loader to-string-loader

  2. настройте свой веб-пакет с помощью

    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
  2. загрузчик css
person Adi Prasetyo    schedule 02.08.2017
comment
как бы вы запустили эту функцию из Webpack/runtime? Я компилирую шаблоны ejs в веб-страницу с одним файлом, поэтому не могу запустить JS со страницы. - person v3nt; 06.10.2020