web-dev-qa-db-ger.com

Mehrere HTML-Dateien mit Webpack

Ich versuche, etwas in einem Projekt zu tun, bei dem ich nicht sicher bin, ob es möglich ist, dass ich falsch liege oder etwas falsch verstanden habe. Wir verwenden Webpack und die Idee ist, mehr als eine HTML-Datei bereitzustellen.

localhost: 8181 -> dient index.html
localhost: 8181/example.html -> dient example.html

Ich versuche es, indem ich mehrere Einstiegspunkte setze, und zwar nach der Dokumentation :

Die Ordnerstruktur ist:

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

beispiel.html:

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

Weiß jemand was ich falsch mache?

Vielen Dank.

31
miguelitomp

Sehen Sie einen Einstiegspunkt als Stamm eines Baums, der viele andere Assets wie Javascript-Module, Bilder, Vorlagen usw. referenziert. Wenn Sie mehr als einen Entrypoint definieren, teilen Sie Ihre Assets im Wesentlichen in sogenannte Chunks auf, um nicht den gesamten Code und die Assets in einem einzigen Paket zu haben.

Ich denke, Sie möchten mehr als eine "index.html" für verschiedene Apps haben, die sich auch auf verschiedene Teile Ihrer Assets beziehen, die Sie bereits mit Ihren Einstiegspunkten definiert haben.

Das Kopieren einer index.html-Datei oder das Erzeugen einer Datei mit Verweisen auf diese Einstiegspunkte wird nicht durch den Einstiegspunktmechanismus gehandhabt - es ist der umgekehrte Weg. Ein grundlegender Ansatz für die Handhabung von HTML-Seiten ist die Verwendung von html-webpack-plugin, mit dem nicht nur HTML-Dateien kopiert werden können, sondern es verfügt auch über einen umfangreichen Mechanismus zum Vorlagen. Dies ist besonders hilfreich, wenn Sie möchten, dass Ihre Bundles mit einem Bundle-Hash versehen werden, mit dem das Zwischenspeichern von Browsern beim Aktualisieren Ihrer App vermieden wird.

Da Sie ein Namensmuster als [id].bundle_[chunkhash].js definiert haben, können Sie Ihr Javascript-Bündel nicht mehr als main.bundle.js referenzieren, da es etwas wie main.bundle_73efb6da.js heißt.

Schauen Sie sich das html-webpack-plugin an. Besonders relevant für Ihren Anwendungsfall:

Sie sollten wahrscheinlich am Ende sowas haben (Warnung: nicht getestet)

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

Bitte beachten Sie, dass Sie den Namen des Eingangspunkts im Chunks-Array angeben. In Ihrem Beispiel sollte dies exampleEntry sein. Möglicherweise ist es auch eine gute Idee, Ihre Vorlagen in einen bestimmten Ordner zu verschieben, anstatt sie direkt im Stammordner src zu haben.

Hoffe das hilft.

57
Andreas Jägle

Sie können auch Copy Webpack Plugin verwenden, wenn Sie nicht zwei verschiedene Builds benötigen, d. H. Vorausgesetzt, Sie möchten nur einen anderen HTML-Code mit demselben main.bundle.js bereitstellen.

Das Plugin ist wirklich simpel (nur in Webpack v4 getestet):

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

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

Dann können Sie in example.html den Build von index.html laden. Z.B.:

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