Wiele plików html za pomocą pakietu webpack

87

Próbuję zrobić coś w projekcie, co do czego nie jestem pewien, czy jest to możliwe, popełniam błąd lub coś nie rozumiem. Używamy webpacka, a pomysł polega na tym, aby obsługiwać więcej niż jeden plik html.

localhost: 8181 -> obsługuje index.html
localhost: 8181 / example.html -> serwuje example.html

Próbuję to zrobić, ustawiając wiele punktów wejścia, postępując zgodnie z dokumentacją :

Struktura folderów jest następująca:

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

Ktoś wie, co robię źle?

Dziękuję Ci.

webpack webpack-dev-server miguelitomp
źródło
Czy jesteś w stanie znaleźć na to rozwiązanie? Szukam również tego samego przypadku użycia.
monica

Odpowiedzi:

118

Zobacz punkt wejścia jako podstawę drzewa, które odwołuje się do wielu innych zasobów, takich jak moduły javascript, obrazy, szablony i tak dalej. Kiedy definiujesz więcej niż jeden punkt wejścia, zasadniczo dzielisz swoje zasoby na tak zwane części, aby nie mieć całego kodu i zasobów w jednym pakiecie.

Myślę, że chcesz osiągnąć więcej niż jeden plik „index.html” dla różnych aplikacji, które również odnoszą się do różnych fragmentów zasobów, które zostały już zdefiniowane w punktach wejścia.

Kopiowanie pliku index.html lub nawet generowanie takiego z odniesieniami do tych punktów wejściowych nie jest obsługiwane przez mechanizm punktów wejściowych - jest odwrotnie. Podstawowym podejściem do obsługi stron html jest użycie narzędzia, html-webpack-pluginktóre nie tylko może kopiować pliki html, ale także ma rozbudowany mechanizm tworzenia szablonów. Jest to szczególnie przydatne, jeśli chcesz, aby Twoje pakiety miały sufiks z hashem pakietu, który jest ładny, aby uniknąć problemów z pamięcią podręczną przeglądarki podczas aktualizacji aplikacji.

Ponieważ zdefiniowałeś wzorzec nazwy, [id].bundle_[chunkhash].jsnie możesz już odwoływać się do pakietu javascript, main.bundle.jsponieważ będzie on nazywany czymś w rodzaju main.bundle_73efb6da.js.

Spójrz na wtyczkę html-webpack-plugin . Szczególnie istotne dla twojego przypadku użycia:

Prawdopodobnie powinieneś mieć coś takiego na końcu (uwaga: nie testowane)

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

Pamiętaj, aby odwołać się do nazwy punktu wejścia w tablicy chunks, więc w Twoim przykładzie powinno to być exampleEntry. Prawdopodobnie dobrym pomysłem jest również przeniesienie szablonów do określonego folderu zamiast umieszczania ich bezpośrednio w głównym folderze src.

Mam nadzieję że to pomoże.

Andreas Jägle
źródło
4
Dobre wyjaśnienie, ale nadal przeszkadza mi to, że musisz wywoływać „nowy HTMLWebPlugin” dla każdej strony, którą tworzysz w swoim projekcie.
klewis
Nie każdy lubi nazywać „nową wtyczką HTMLWebPlugin” na każdej ze stron. Potrzebujesz alternatywy.
ChosenUser
3

Możesz także użyć wtyczki Copy Webpack, jeśli nie potrzebujesz dwóch różnych kompilacji, tj. Zakładając, że chcesz po prostu obsługiwać inny kod HTML z tym samym main.bundle.js.

Wtyczka jest naprawdę prosta (testowana tylko w pakiecie webpack v4):

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

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

Następnie example.htmlmożesz załadować kompilację z index.html. Na przykład:

<!DOCTYPE html>
<html
<head>
    ...
    <title>Example</title>
</head>
<body>
    <div id="container"> Show an example </div>
    <script src="main.bundle.js"></script>
</body>
</html>
F Lekschas
źródło
1
czy istnieje inny sposób użycia CopyWebpackPlugin i dodania pliku bundle.js do pliku html za pośrednictwem webpacka zamiast bezpośredniego podawania odniesienia do skryptu w samym pliku html?
Sritam Jagadev
3

Aby użyć wielu plików HTMLWebpack przy użyciu HtmlWebpackPlugin :

Zmodyfikuj webpack.config.js, bezpośrednio osadzając poniższy kod.

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)
  
};

Możesz dodać dowolną liczbę stron HTML do htmlPageNamestablicy. Upewnij się, że każdy plik HTML i odpowiadający mu plik JS mają taką samą nazwę (zakłada to powyższy kod).

RICHARD ABRAHAM
źródło
0

Istnieje inne rozwiązanie, zakładając Webpack ^ 4.44.1. Oznacza to importowanie kodu HTML do aplikacji JS / TS.

Przykładowy plik 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'),
    },
};

Odpowiednia aplikacja

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 skopiuje about.html do odpowiedniego folderu wyjściowego .

Alex Nolasco
źródło
0 
plugins: [
  ...templates.map(template => new HtmlWebpackPlugin(template))
]

Ten kod pomógłby, gdybyś miał dużo szablonów :)

Pavel Rodionov
źródło