Fichiers html multiples avec webpack

Question

Fichiers html multiples avec webpack

Demandé el 30 de Septembre, 2016: Quand la question a-t-elle été
17263 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie de faire quelque chose dans un projet dont je ne suis pas sûr qu'il soit possible, je suis dans une mauvaise voie ou je comprends mal quelque chose. Nous utilisons webpack, et l'idée est de servir plus d'un fichier html.

localhost:8181 -> sert index.html
localhost:8181/example.html -> sert exemple.html

J'essaie de le faire en définissant plusieurs points d'entrée, en suivant la méthode documentation :

La structure du dossier est la suivante :

/
|- 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="stackoverflow.com/style/default.css">
</head>
<body>
    <div id="container"></div>
    <script src="/main.bundle.js"></script>
</body>
</html>

exemple.html :

<!DOCTYPE html>
<html
<head>
    ...
    <link type="text/css" href="stackoverflow.com/style/default.css">
</head>
<body>
    ...
    <script src="/example.bundle.js"></script>
</body>
</html>

Quelqu'un sait ce que je fais mal ?

Merci.

Demandé el 30 de Septembre, 2016 par miguelitomp

Answer 1

2 Réponses

Answer 2

84voto

Andreas Jägle Points 4702

Considérez un point d'entrée comme la racine d'un arbre qui fait référence à de nombreuses autres ressources telles que des modules javascript, des images, des modèles, etc. Lorsque vous définissez plus d'un point d'entrée, vous divisez essentiellement vos ressources en ce que l'on appelle des morceaux pour ne pas avoir tout votre code et vos ressources dans un seul paquet.

Je pense que ce que vous voulez faire, c'est avoir plus d'un "index.html" pour différentes applications qui font également référence à différentes parties de vos actifs que vous avez déjà définies avec vos points d'entrée.

La copie d'un fichier index.html ou même la création d'un fichier avec des références à ces points d'entrée n'est pas gérée par le mécanisme des points d'entrée - c'est l'inverse. Une approche de base pour la gestion des pages html consiste à utiliser la fonction html-webpack-plugin qui non seulement peut copier des fichiers html mais possède également un mécanisme étendu de création de modèles. Ceci est particulièrement utile si vous voulez que vos bundles soient suffixés par un hash de bundle qui est joli pour éviter les problèmes de cache du navigateur lorsque vous mettez à jour votre application.

Comme vous avez défini un modèle de nom comme [id].bundle_[chunkhash].js vous ne pouvez plus faire référence à votre bundle javascript en tant que main.bundle.js car il sera appelé quelque chose comme main.bundle_73efb6da.js .

Jetez un coup d'œil à la html-webpack-plugin . Particulièrement pertinent pour votre cas d'utilisation :

Vous devriez probablement avoir quelque chose comme ça à la fin (avertissement : non testé)

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'src/index.html',
    chunks: ['main']
  }),
  new HtmlWebpackPlugin({
    filename: 'example.html',
    template: 'src/example.html',
    chunks: ['exampleEntry']
  })
]

N'oubliez pas de référencer le nom du point d'entrée dans le tableau des morceaux, donc dans votre exemple, cela devrait être exampleEntry . C'est probablement aussi une bonne idée de déplacer vos modèles dans un dossier spécifique au lieu de les avoir directement dans le dossier Root src.

J'espère que cela vous aidera.

Répondu el 2 de Octobre, 2016 par Andreas Jägle (4702 Points )

Answer 3

2voto

Flek Points 3312

Vous pouvez également utiliser Copier le plugin Webpack si vous n'avez pas besoin de deux constructions différentes, c'est-à-dire en supposant que vous voulez juste servir un HTML différent avec le même main.bundle.js .

Le plugin est vraiment très simple (testé uniquement dans webpack v4) :

const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/example.html', to: './example.html' }
    ])
  ]
}

Ensuite, dans example.html vous pouvez charger le build à partir de index.html . Par exemple :

<!DOCTYPE html>
<html
<head>
    ...
    <title>Example</title>
</head>
<body>
    <div id="container"> Show an example </div>
    <script src="main.bundle.js"></script>
</body>
</html>

Répondu el 17 de Mai, 2018 par Flek (3312 Points )

Fichiers html multiples avec webpack

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Fichiers html multiples avec webpack

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: