web-dev-qa-db-fra.com

Plusieurs fichiers HTML à l'aide de webpack

J'essaie de faire quelque chose dans un projet dont je ne suis pas sûr si c'est possible, je me trompe 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 le documentation :

La structure du dossier est:

/
|- 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>

exemple.html:

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

Quelqu'un sait ce que je fais mal?

Je vous remercie.

webpackwebpack-dev-server
31
miguelitomp

Voyez un point d’entrée comme la racine d’une arborescence faisant référence à de nombreux autres actifs, tels que des modules javascript, des images, des modèles, etc. Lorsque vous définissez plusieurs points d’entrée, vous divisez essentiellement vos actifs en "morceaux" afin de ne pas contenir tout votre code et tous vos actifs dans un seul et même ensemble.

Ce que je pense que vous voulez réaliser est d’avoir plus d’un "index.html" pour différentes applications qui font également référence à différents morceaux de vos actifs que vous avez déjà définis avec vos points d’entrée.

Copier un fichier index.html ou même en générer un avec des références à ces points d’entrée n’est pas géré par le mécanisme de point d’entrée - c’est l’inverse. Une approche de base pour la gestion des pages html consiste à utiliser le html-webpack-plugin, qui permet non seulement de copier des fichiers html, mais dispose également d’un mécanisme complet de modélisation. Cela est particulièrement utile si vous souhaitez que vos ensembles soient suffixés avec un hachage d’ensemble, ce qui permet d’éviter les problèmes de mise en cache du navigateur lorsque vous mettez à jour votre application.

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

Regardez le html-webpack-plugin . Particulièrement pertinent pour votre cas d'utilisation:

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

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

Veuillez noter que vous devez référencer le nom du point d’entrée dans le tableau de morceaux, de sorte que 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 insérer directement dans le dossier racine src.

J'espère que cela t'aides.

57
Andreas Jägle

Vous pouvez également utiliser Copy Webpack Plugin si vous n’avez pas besoin de deux versions différentes, c’est-à-dire si vous souhaitez simplement servir un code 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 la construction à 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>
0
F Lekschas