Plusieurs fichiers HTML à l'aide de Webpack

Question 1

J'essaye de faire quelque chose dans un projet dont je ne sais pas si c'est possible, je suis dans une mauvaise direction ou je ne comprends pas 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 example.html

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

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

example.html:

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

Quelqu'un sait ce que je fais de mal?

Merci.

Question 2

Voir un point d'entrée comme la racine d'une arborescence qui fait référence à de nombreux autres actifs tels 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 actifs en soi-disant morceaux pour ne pas avoir tout votre code et vos actifs dans un seul 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-pluginqui non seulement peut copier des fichiers html, mais dispose également d'un mécanisme étendu de création de modèles. Ceci est particulièrement utile si vous souhaitez que vos bundles soient suffixés avec un hachage de bundle assez pratique pour é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 [id].bundle_[chunkhash].js vous ne pouvez plus référencer votre bundle javascript main.bundle.jscar il s'appellera quelque chose comme main.bundle_73efb6da.js.

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

Vous devriez probablement avoir quelque chose comme ça à la fin (attention: 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']
  })
]

Veuillez noter que vous devez 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 racine src.

J'espère que cela t'aides.

Question 3

Vous pouvez également utiliser Copy Webpack Plugin si vous n'avez pas besoin de deux versions différentes, c'est-à-dire en supposant que vous voulez simplement 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, example.htmlvous 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>

Question 4

Pour utiliser plusieurs fichiers HTML en `Webpack`utilisant HtmlWebpackPlugin :

Modifiez le webpack.config.jsen incorporant directement le code ci-dessous.

const HtmlWebpackPlugin = require('html-webpack-plugin');

let htmlPageNames = ['example1', 'example2', 'example3', 'example4'];
let multipleHtmlPlugins = htmlPageNames.map(name => {
  return new HtmlWebpackPlugin({
    template: `./src/${name}.html`, // relative path to the HTML files
    filename: `${name}.html`, // output HTML files
    chunks: [`${name}`] // respective JS files
  })
});

module.exports = {
  entry: {
    main: './js/main.js',
    example1: './js/example1.js',
    //... repeat until example 4
  },
  module: { 
       //.. your rules
  };
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      chunks: ['main']
    })
  ].concat(multipleHtmlPlugins)
  
};

Vous pouvez ajouter autant de pages HTML que nécessaire au htmlPageNamestableau. Assurez-vous que chaque fichier HTML et JS correspondant ont le même nom (le code ci-dessus suppose que).

Question 5

Il existe une autre solution, en supposant Webpack ^ 4.44.1. Autrement dit, importer le HTML dans votre application JS / TS.

Exemple de webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    entry: { app: './src/index.ts' },

    mode: 'development',
    devtool: 'inline-source-map',
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Development',
            template: path.join(path.resolve(__dirname, 'src'), 'index.ejs')
        }),
    ],
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                include: [path.resolve(__dirname, 'src')],
                exclude: /node_modules/,
            },
            {
                test: /\.html$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    }
                ],
                // this exclude is required
                exclude: path.join(path.resolve(__dirname, 'src'), 'index.html')
            }
        ],
    },
    resolve: {
        extensions: ['.ts', '.js'],
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 3900
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
};

Application correspondante

import './about.html';
    
console.log('this is a test');

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Question</title>
</head>
<body>
     <a href="./about.html">About</a>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About</title>
</head>
<body>
    <p>This is an about page</p>
</body>
</html>

Webpack copiera about.html dans le dossier de sortie correspondant .

Question 6

plugins: [
  ...templates.map(template => new HtmlWebpackPlugin(template))
]

Ce code vous aiderait si vous avez beaucoup de modèles :)

Plusieurs fichiers HTML à l'aide de Webpack

Pour utiliser plusieurs fichiers HTML en Webpackutilisant HtmlWebpackPlugin :

Pour utiliser plusieurs fichiers HTML en `Webpack`utilisant HtmlWebpackPlugin :