web-dev-qa-db-fra.com

Y a-t-il un moyen d'inclure partiel en utilisant html-webpack-plugin?

J'utilise Webpack pour compiler mes scripts et HTML (en utilisant html-webpack-plugin). Le problème, c’est que j’ai 5 fichiers HTML contenant les mêmes parties et que je souhaite déplacer ces parties pour séparer les fichiers .html, puis include ces parties dans chaque fichier HTML. Ainsi, si je change ces petits fichiers HTML, tous les fichiers HTML seront recompilés pour représenter ces modifications.

Webpack le fait pour les fichiers .js par défaut, mais puis-je utiliser quelque chose comme ça pour les fichiers HTML?

htmlwebpackfrontend
17
serge1peshcoff

Vous pouvez utiliser <%= require('html!./partial.html') %> dans votre modèle. Exemple ici: https://github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-template/template.html

21
mantastrunce

Une autre solution légèrement différente. 

Utilisation de html-loader avec l'option interpolate.

https://github.com/webpack-contrib/html-loader#interpolation

{ test: /\.(html)$/,
  include: path.join(__dirname, 'src/views'),
  use: {
    loader: 'html-loader',
    options: {
      interpolate: true
    }
  }
}

Et puis dans les pages html, vous pouvez importer des variables partielles html et javascript.

<!-- Importing top <head> section -->
${require('./partials/top.html')}
<title>Home</title>
</head>
<body>
  <!-- Importing navbar -->
  ${require('./partials/nav.html')}
  <!-- Importing variable from javascript file -->
  <h1>${require('../js/html-variables.js').hello}</h1>
  <!-- Importing footer -->
  ${require('./partials/footer.html')}
</body>

html-variables.js ressemble à ceci:

const hello = 'Hello!';
const bye = 'Bye!';

export {hello, bye}

Le seul inconvénient est que vous ne pouvez pas importer d'autres variables de HtmlWebpackPlugin comme ceci <%= htmlWebpackPlugin.options.title %> (du moins, je ne trouve pas le moyen de les importer), mais pour moi ce n'est pas un problème, écrivez simplement le titre dans votre code HTML ou utilisez un nom distinct. fichier javascript pour les variables de traitement.

6
pldg

Départ Partials pour HTML Webpack Plugin pour quelque chose d'un peu plus élégant. Il vous permet de configurer des fichiers HTML et de les inclure de la même manière que ce que vous recherchez, par exemple:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackPartialsPlugin({
    path: './path/to/partials/body.html'
  })
]

Également configurable pour l’endroit où il est ajouté, comme tête/corps, ouverture/fermeture, et vous permet de passer des variables.

1
Colby