Implementierungsschritte zum Erstellen mehrseitiger Programme mit Webpack

.
├─ Quelle
│ └─ Seiten
│ ├─ über
│ │ ├─ index.css
│ │ ├─ index.html
│ │ └─ index.js
│ └─ Index
│ ├─ index.css
│ ├─ index.html
│ └─ index.js
└─ webpack.config.js

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

modul.exporte = {
 Eintrag: './src/index.js',
 Plugins: [
  neues HtmlWebpackPlugin({
   Vorlage: './src/index.html',
   Dateiname: 'index.html',
  }),
 ],
 Ausgabe: {
  Pfad: Pfad.auflösen(__dirname, './dist'),
  Dateiname: „bundle.js“,
 },
};

modul.exporte = {
 Eintrag: {
  Index: './src/pages/index/index.js',
  über: './src/pages/about/index.js',
 },
 ...
}

const glob = erfordern('glob');

Funktion getEntry() {
 const-Eintrag = {};
 glob.sync('./src/pages/**/index.js').forEach((Datei) => {
  const name = file.match(/\/pages\/(.+)\/index.js/)[1];
  Eintrag[Name] = Datei;
 });
 Rückmeldeeingang;
}

modul.exporte = {
 Eintrag: getEntry(),
 ...
}

modul.exporte = {
 ...
 Ausgabe: {
  Pfad: Pfad.auflösen(__dirname, './dist'),
  Dateiname: „js/[name].[contenthash].js“,
 },
 ...
}

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

modul.exporte = {
 ...
 Plugins: [
  neues HtmlWebpackPlugin({
   Vorlage: './src/pages/index/index.html',
   Brocken: ['Index'],
   Dateiname: 'index.html',
  }),
  neues HtmlWebpackPlugin({
   Vorlage: './src/pages/about/index.html',
   Brocken: ['über'],
   Dateiname: 'about.html',
  }),
 ],
 ...
};

const HtmlWebpackPlugin = erfordern('html-webpack-plugin');
const glob = erfordern('glob');

Funktion getHtmlTemplate() {
 glob zurückgeben
  .sync('./src/pages/**/index.html')
  .map((Datei) => {
   return { Name: file.match(/\/pages\/(.+)\/index.html/)[1], Pfad: Datei };
  })
  .Karte(
   (Vorlage) =>
    neues HtmlWebpackPlugin({
     Vorlage: Vorlage.Pfad,
     Stücke: [Vorlage.Name.toString()],
     Dateiname: `${template.name}.html`,
    })
  );
}

 
modul.exporte = {
 ...
 Plugins: [...getHtmlTemplate()],
 ...
};

// webpack.config.js

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

//Mehrseitige Einträge Funktion getEntry() {
 const-Eintrag = {};
 glob.sync('./src/pages/**/index.js').forEach((Datei) => {
  const name = file.match(/\/pages\/(.+)\/index.js/)[1];
  Eintrag[Name] = Datei;
 });
 Rückmeldeeintrag;
}

//Mehrseitige Vorlage Funktion getHtmlTemplate() {
 glob zurückgeben
  .sync('./src/pages/**/index.html')
  .map((Datei) => {
   return { Name: file.match(/\/pages\/(.+)\/index.html/)[1], Pfad: Datei };
  })
  .Karte(
   (Vorlage) =>
    neues HtmlWebpackPlugin({
     Vorlage: Vorlage.Pfad,
     Stücke: [Vorlage.Name.toString()],
     Dateiname: `${template.name}.html`,
    })
  );
}

const konfiguration = {
 Modus: 'Produktion',
 Eintrag: getEntry(),
 Ausgabe: {
  Pfad: Pfad.auflösen(__dirname, './dist'),
  Dateiname: „js/[name].[contenthash].js“,
 },
 Modul: {
  Regeln:
   {
    Test: /\.css$/,
    verwenden: ['style-loader', 'css-loader'],
   },
  ],
 },
 Plugins: [neues CleanWebpackPlugin(), ...getHtmlTemplate()],
 devServer: {
  contentBase: Pfad.join(__dirname, 'dist'),
  komprimieren: wahr,
  Port: 3000,
  heiß: wahr,
  offen: wahr,
 },
};

module.exports = Konfiguration;