Wiele plików HTML za pomocą pakietu internetowego

Próbuję zrobić coś w projekcie, że nie jestem pewien, czy jest to możliwe, jestem w złym kierunku lub coś nie rozumiem. Używamy webpacka, a jego celem jest obsługa więcej niż jednego pliku html.Wiele plików HTML za pomocą pakietu internetowego

localhost: 8181 -> służy index.html
localhost: 8181/example.html -> służy example.html

Próbuję to zrobić poprzez ustawienie wielu punktów wejścia, po documentation:

struktura folder jest:

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

example.html:

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

Ktoś wie, co robię źle?

Dziękuję.

Źródło

2016-09-30 miguelitomp

Czy jesteś w stanie znaleźć rozwiązanie tego problemu? Szukam również tego samego przypadku użycia. – monica

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

Co myślę, że chcesz osiągnąć, to mieć więcej niż jeden "index.html" dla różnych aplikacji, które odnoszą się również do różnych części zasobów, które już zdefiniowałeś z punktami początkowymi.

Kopiowanie pliku index.html lub nawet generowanie odwołań do tych punktów wejścia nie jest obsługiwane przez mechanizm punktu wejścia - jest odwrotnie. Podstawowym podejściem do obsługi stron html jest korzystanie z html-webpack-plugin, które nie tylko może kopiować pliki html, ale także ma rozbudowany mechanizm do szablonów. Jest to szczególnie przydatne, jeśli chcesz, aby pakiety były oznaczone za pomocą skrótu pakietu, który pozwala uniknąć problemów z buforowaniem przeglądarki podczas aktualizacji aplikacji.

Po zdefiniowaniu wzorca nazwy jako [id].bundle_[chunkhash].js nie można już odwoływać się do pakietu javascript jako main.bundle.js, ponieważ będzie on nazywał się coś w rodzaju main.bundle_73efb6da.js.

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

powinny Prawdopodobnie masz coś takiego w 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'] 
    }) 
]

Należy pamiętać aby odwołać się do nazwy punktu wejścia w tablicy porcji, więc w twoim przykładzie powinno to być exampleEntry. Prawdopodobnie dobrym pomysłem jest przeniesienie szablonów do określonego folderu, zamiast umieszczania ich bezpośrednio w katalogu głównym src.

Mam nadzieję, że to pomoże.

Źródło

2016-10-02 11:35:37

Wiele plików HTML za pomocą pakietu internetowego

Odpowiedz

Powiązane problemy