Внедрить JavaScript файлов внутри шаблонов или HTML с помощью веб-пакета - PullRequest
Новая
       3

Внедрить JavaScript файлов внутри шаблонов или HTML с помощью веб-пакета

0 голосов
/ 12 февраля 2020

Допустим, у меня есть сервер (например, Node & Express), который обслуживает HTML страниц для клиентов на основе файлов шаблонов (как pug, e js, handlebars, twig, marko ...). Это классический многостраничный веб-сайт, где каждая страница имеет свои JavaScript файлы. Если я использую веб-пакет для объединения JavaScript файлов, можно ли автоматически (с шагом сборки) вставлять Javascript файлы в соответствующие им шаблоны?

Я не хочу создавать HTML файлы, поэтому все решения, основанные на html -webpack-plugin , - это не то, что я ищу. Я хочу сделать так, как могу с grunt или gulp, но с веб-пакетом, чтобы не нужно было импортировать каждый пакет вручную в каждом соответствующем шаблоне.

Пример решений без веб-пакета:

gulp inject

пост сборка

Я не нахожу реальных ответов в других постах.

Заранее спасибо.

Редактировать

Это вроде работает. Я пытался с мопсом, а затем с Марко на основе ответа SpeedOfRound. У меня была проблема с внедрением файлов, потому что мои шаблоны вложены (макет, обертка, страница ...), и у меня не было head или body в файлах, где я хотел разместить свои теги. Я использовал inject: false и <%= htmlWebpackPlugin.tags.bodyTags %> (доступно только в v4.0 +), и это работает, но не совсем то, что я ожидал. Здесь мы создаем новый файл в ./dist/, и он не соответствует моей архитектуре. Я просто хочу сделать пакет по шаблону и автоматически вставить его в нужный шаблон.

После этого конечной целью будет просто создать JS файлы в нужной папке, в которой находится представление шаблона, и затем оно будет автоматически добавлено в это представление (в соглашении по способу настройки).

1 Ответ

1 голос
/ 12 февраля 2020

Вы можете сделать это с помощью HtmlWebpackPlugin, указав его на свой шаблон. Вот мое сокращенное webpack.config.js, где я делаю это с шаблонами усов. 

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    entry: "./js/app.js",
  },  
  output: {
    path: path.join(__dirname, 'dist'),
    filename: "[name].js",
    chunkFilename:'[name].[chunkhash].js',
    publicPath: '/dist/'
  },
  plugins: [
    new webpack.ProvidePlugin({
      'React': 'react',
    }),
    new HtmlWebpackPlugin({
      inject: 'head',
      filename: path.resolve(__dirname, './templates/dist/app.mustache'),
      template: path.resolve(__dirname, "./templates/app.mustache"),
      chunks: ['entry'],
      favicon: "./public/favicon.ico"
    }),
  ]
}

Это очень полезно для разбиения кода, где вы можете разбивать свои сборки на куски и вставлять несколько кусков на свои страницы. Таким образом, вы можете повторно использовать куски, и браузер должен загружать их только один раз между страницами.

Это не должно быть усами, я также делаю это с php представлениями.

...