Webpack'i kullanarak birden çok html dosyası

Bir projede, mümkün olup olmadığından emin olmadığım bir şey yapmaya çalışıyorum, yanlış bir şekilde ya da bir şeyi yanlış anladım. Webpack kullanıyoruz ve fikir birden fazla html dosyasına hizmet etmektir.Webpack'i kullanarak birden çok html dosyası

localhost: 8181 -> vermektedir index.html
localhost: 8181/example.html -> example.html ben documentation, çoklu giriş noktalarını ayarlayarak takip ederek yapmaya çalışıyorum

hizmet eder:

klasör yapısı:

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

Biri ben yanlış yapıyorum biliyor?

Teşekkür ederiz.

kaynak

2016-09-30 miguelitomp

Bunun için çözüm bulabildiniz mi? Aynı kullanım durumunu da arıyorum. – monica

Javascript modülleri, resimler, şablonlar vb. Gibi birçok öğeye referans veren bir ağacın kökü olarak bir giriş noktasını görün. Birden fazla giriş noktası tanımladığınızda, tüm kodunuzu ve varlıklarınızı tek bir pakette içermemek için temel olarak varlıklarınızı sözde parçalara böldünüz.

Elde etmek istediğinizi düşündüğünüz, girişlerinizle önceden tanımladığınız öğelerinizin farklı parçalarını da gösteren farklı uygulamalar için birden fazla "index.html" ye sahip olmaktır.

Bir index.html dosyasının kopyalanması veya bu giriş noktalarına yapılan referanslarla bir tane bile oluşturulması, giriş noktası mekanizması tarafından ele alınmaz - bu diğer yoldur. Html sayfalarını işlemek için temel bir yaklaşım, sadece html dosyalarını kopyalamakla kalmayan, aynı zamanda şablonlama için kapsamlı bir mekanizmaya sahip olan html-webpack-plugin kullanıyor. Bu, özellikle, uygulamanızı güncellediğinizde tarayıcı önbellekleme sorunlarından kaçınmak için güzel bir paket karma değeriyle birlikte paketlerinizin olmasını istiyorsanız yararlı olur.

[id].bundle_[chunkhash].js olarak bir ad deseni tanımladığınızdan, javascript paketinizi main.bundle.js olarak artık main.bundle_73efb6da.js gibi bir şey olarak adlandırılacağı için başvuruda bulunamazsınız.

html-webpack-plugin'a bir bakın. kullanımı durumda özellikle alakalı:

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

dikkat edin:

Muhtemelen sonunda böyle bir şeyi (test edilmemiş uyarısı) sahip olmalıdır Örnekler dizisinde, giriş noktasının ismine başvurmak için, örneğinizde bu exampleEntry olmalıdır. Muhtemelen, şablonlarınızı doğrudan root src klasörüne taşımak yerine belirli bir klasöre taşımak iyi bir fikirdir.

Bu yardımcı olur umarım.

kaynak

2016-10-02 11:35:37

Webpack'i kullanarak birden çok html dosyası

cevap

İlgili konular