Введите какой-нибудь предварительно отформатированный HTML-файл, используя веб-пакет или пользовательское расширение для него. - PullRequest
Новая
       32

Введите какой-нибудь предварительно отформатированный HTML-файл, используя веб-пакет или пользовательское расширение для него.

0 голосов
/ 15 октября 2019

Есть ли способ внедрить блок кода ниже (как, например, с комментариями и формированием строки без его свертывания в одну строку), используя только webpack. Желательно, чтобы на этапе создания таким способом генерируемые файлы могли бы его внедрить. 

<!-- Comment -->
<script>/* script goes here */</script>
<!-- End Commnet -->

Я не уверен, с какой стороны подходить, так как веб-пакет является для меня новым, за исключением, может быть, какого-то шагапошаговая настройка из их документации.

Я искал webpack-html-plugin, но не нашел способа указать чанк в виде строки, так как разрешены только файлы.

IУже нашли способ внедрить его в виде строки (но только когда приложение active уже запущено), используя insertAdjacentHTML, но это не то, что я искал. Я хочу иметь возможность передавать аргументы webpack, используя его файлы конфигурации, но некоторые аргументы различаются в зависимости от среды.

1 Ответ

0 голосов
/ 15 октября 2019

Вы можете использовать html-webpack-plugin

Вы можете определить любые переменные в вашем webpack.config.js, включая html: 

new HtmlWebpackPlugin({
    template: './src/index.html',
    header: '<h1>A title</h1>',
    anyElement: '<b>I am an html element</b>'
})

Затем вы можете вставить их в ваш index.html следующим образом:

<html>
    <head></head>
    <body>
        <%= htmlWebpackPlugin.options.header %>
        <h1>Some Other Html Content</h1>
        <%= htmlWebpackPlugin.options.footer %>
    </body>
</html>

Если у вас есть внешние html-файлы, которые вы хотите использовать, вы можете сделать это, используя интегрированный модуль node js с именем fs, чтобы прочитать файлы и затем передать их в свои переменные. Вам не нужно устанавливать fs, поскольку он поставляется с nodejs 

let fs = require('fs');

const myFile = fs.readFileSync(__dirname + '/myfile.html');
const thatFile = fs.readFileSync(__dirname + '/thatfile.html');

module.exports = {

    // your config

    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html',
        myFile: myFile,
        thatFile: thatFile,
      })
     ]
});

Теперь, когда вы запускаете Webpack, ваш HTML-файл будет вставлен в указанные вами места. 

<html>
    <head></head>
    <body>
        <%= htmlWebpackPlugin.options.myFile %>
        <h1>Some other html content</h1>
        <%= htmlWebpackPlugin.options.yourFile %>
    </body>
</html>
...