plugin - Múltiples archivos html usando webpack
webpack html css (2)
Estoy tratando de hacer algo en un proyecto que no estoy seguro de si es posible, estoy equivocado o malinterpreto algo. Estamos usando webpack, y la idea es servir más de un archivo html.
localhost: 8181 -> sirve index.html
localhost: 8181 / example.html -> sirve example.html
Estoy tratando de hacerlo estableciendo múltiples puntos de entrada, siguiendo la documentation :
La estructura de la carpeta es:
/
|- package.json
|- webpack.config.js
/src
|- index.html
|- example.html
| /js
|- main.js
|- example.js
Webpack.config.js:
...
entry: {
main: ''./js/main.js'',
exampleEntry: ''./js/example.js''
},
output: {
path: path.resolve(__dirname, ''build'', ''target''),
publicPath: ''/'',
filename: ''[name].bundle.js'',
chunkFilename: ''[id].bundle_[chunkhash].js'',
sourceMapFilename: ''[file].map''
},
...
index.html
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
<div id="container"></div>
<script src="/main.bundle.js"></script>
</body>
</html>
ejemplo.html:
<!DOCTYPE html>
<html
<head>
...
<link type="text/css" href="/style/default.css">
</head>
<body>
...
<script src="/example.bundle.js"></script>
</body>
</html>
Alguien sabe lo que estoy haciendo mal?
Gracias.
También puede usar
Copy Webpack Plugin
si no necesita dos compilaciones diferentes, es decir, suponiendo que solo desea servir un HTML diferente con el mismo
main.bundle.js
.
El complemento es realmente simple (solo probado en webpack v4):
const CopyWebpackPlugin = require(''copy-webpack-plugin'');
const config = {
plugins: [
new CopyWebpackPlugin([
{ from: ''./src/example.html'', to: ''./example.html'' }
])
]
}
Luego, en
example.html
, puede cargar la compilación desde
index.html
.
P.ej:
<!DOCTYPE html>
<html
<head>
...
<title>Example</title>
</head>
<body>
<div id="container"> Show an example </div>
<script src="main.bundle.js"></script>
</body>
</html>
Vea un punto de entrada como la raíz de un árbol que hace referencia a muchos otros activos, como módulos de JavaScript, imágenes, plantillas, etc. Cuando define más de un punto de entrada, básicamente divide sus activos en los llamados fragmentos para no tener todo su código y activos en un solo paquete.
Lo que creo que quiere lograr es tener más de un "index.html" para diferentes aplicaciones que también se refieren a diferentes fragmentos de sus activos que ya definió con sus puntos de entrada.
El mecanismo de punto de entrada no maneja la copia de un archivo index.html o incluso la generación de uno con referencias a estos puntos de entrada; es al revés.
Un enfoque básico para manejar páginas html es usar
html-webpack-plugin
que no solo puede copiar archivos html sino que también tiene un mecanismo extenso para crear plantillas.
Esto es especialmente útil si desea que sus paquetes tengan el sufijo con un hash de paquete que es bastante para evitar problemas de almacenamiento en caché del navegador cuando actualiza su aplicación.
Como ha definido un patrón de nombre como
[id].bundle_[chunkhash].js
, ya no puede hacer referencia a su paquete de javascript como
main.bundle.js
ya que se llamará algo así como
main.bundle_73efb6da.js
.
Echa un vistazo a html-webpack-plugin . Especialmente relevante para su caso de uso:
Probablemente debería tener algo así al final (advertencia: no probado)
plugins: [
new HtmlWebpackPlugin({
filename: ''index.html'',
template: ''src/index.html'',
chunks: [''main'']
}),
new HtmlWebpackPlugin({
filename: ''example.html'',
template: ''src/example.html'',
chunks: [''exampleEntry'']
})
]
Tenga en cuenta que debe hacer referencia al nombre del punto de entrada en la matriz de fragmentos, por lo que en su ejemplo debería ser
exampleEntry
.
Probablemente también sea una buena idea mover sus plantillas a una carpeta específica en lugar de tenerlas directamente dentro de la carpeta raíz src.
Espero que esto ayude.