page - ¿Hay alguna forma de incluir el uso parcial de html-webpack-plugin?
webpack html css (3)
Estoy usando Webpack para compilar mis scripts y HTML (usando html-webpack-plugin ). La cosa es que tengo 5 archivos HTML que contienen las mismas partes y quiero mover estas partes a archivos .html separados y luego include estas partes en cada archivo HTML. De esta manera, si cambiaré estos archivos HTML más pequeños, recompilará cada archivo HTML para representar estos cambios.
Webpack hace esto para los archivos .js de forma predeterminada, pero ¿puedo usar algo así para los archivos HTML?
Echa un vistazo a Pariales para HTML Webpack Plugin para algo un poco más elegante. Te permite configurar archivos HTML e incluirlos de forma similar a lo que estás buscando simplemente como:
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackPartialsPlugin({
path: ''./path/to/partials/body.html''
})
]
También configurable para donde se agrega, como cabeza contra cuerpo, apertura vs cierre, y le permite pasar variables.
Otra solución ligeramente diferente.
Utilizando html-loader con opción de interpolate .
https://github.com/webpack-contrib/html-loader#interpolation
{ test: //.(html)$/,
include: path.join(__dirname, ''src/views''),
use: {
loader: ''html-loader'',
options: {
interpolate: true
}
}
}
Y luego, en las páginas html puede importar parciales html y variables de 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 ve así:
const hello = ''Hello!'';
const bye = ''Bye!'';
export {hello, bye}
El único inconveniente es que no puedes importar otras variables de HtmlWebpackPlugin como esto <%= htmlWebpackPlugin.options.title %> (al menos no puedo encontrar una manera de importarlas) pero para mí no es un problema, solo escribe el título en su html o use un archivo javascript separado para manejar las variables.
Puede usar <%= require(''html!./partial.html'') %> en su plantilla. Ejemplo aquí: https://github.com/jantimon/html-webpack-plugin/blob/master/examples/custom-template/template.html