Рендеринг нескольких страниц, не связанных с основным приложением, с помощью Webpack и Mustache - PullRequest
Новая
       19

Рендеринг нескольких страниц, не связанных с основным приложением, с помощью Webpack и Mustache

0 голосов
/ 08 апреля 2019

Я разрабатываю расширение для Chrome и использую Webpack для его комплектации.У меня есть скомпилированный пакет, который является основной частью приложения, но мне также нужна страница опций для описания функциональности.Эта страница опций не имеет ничего общего с пакетом, это просто статический HTML-файл.

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

Вот мой конфиг Webpack (я удалил части, касающиеся моего приложения): 

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  output: {
    path: path.join(__dirname, 'extension/build/')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/options/index.html',
      inject: false
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: 'mustache-loader',
        options: {
          render: require('./src/options/index.js')
        }
      }
    ]
  }
}

и в моем src/index.js яhave: 

require('./options/index.html')

Это откроет шаблон и отобразит его с данными в src/options/index.js.

Однако с этим есть проблема.Я запускаю Webpack с webpack --watch и изменения на index.js (он содержит данные шаблона) не вызывают перестроение.Кроме того, мне нужно было бы пройти через много проблем, чтобы создать другой статический HTML-файл таким же образом.

Было бы идеально, если бы HtmlWebpackPlugin автоматически использовал шаблон I require() в моей точке входа,что мне не нужно явно устанавливать его.Кроме того, было бы здорово, если бы он автоматически использовал js в том же месте для получения данных.Например: 

require('./options/index.html`)

Визуализирует шаблон с данными из ./options/index.html.js, а затем выдает его.Было бы еще лучше, если бы он отправлял его в пользовательскую папку, указанную в конфигурации Webpack.

Возможно ли это?Я не смог найти плагин / загрузчик, который делает это.

Редактировать: Мне удалось частично решить проблему перестроения, указав параметр render в качестве функции:

{
  test: /\.html$/,
  loader: 'mustache-loader',
  options: {
    render () {
      var file = './src/options/index.js'
      delete require.cache[require.resolve(file)]
      return require(file)
    }
  }
}

Но все равно не работает должным образом.Перестройка сработает только после внесения изменений в index.html.Это означает, что если я изменю index.js, мне нужно будет также сохранить index.html, чтобы запустить сборку.

...