Wie konfiguriert man Webpack für mehrere HTML-Dateien mit gemeinsamen js und html-spezifischen js?

Question

Ich habe ein angular 2 version rc5 with webpack Projekt eingerichtet. Ich versuche, einige Extras wie eine lib.ts (für benutzerdefinierte Bibliotheken nicht winkelabhängig) und redirect.html Seite, die als Callback-Seite von Dritten für die Authentifizierung (sagen wir Dropbox) verwendet werden. so sieht mein webpack.common.js jetzt wie

entry: { 
    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'app': './src/main.ts', 
    'lib': './src/lib.ts' 
}, 
plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['app', 'lib', 'vendor', 'polyfills'] 
    }), 
    new HtmlWebpackPlugin({ 
     filename:'index.html' 
     template: 'src/index.html' 
    }), 
    new HtmlWebpackPlugin({ 
     filename:'dropbox.html' 
     template: 'src/redirect.html', 
     excludeChunks:['app'] 
    }) 
] 

Diese Umleitung Seite ist nur eine normale Seite (kein Winkel Seite), die access_token mit lib.ts und lib.ts erfaßt wird auch durch Winkel als Dienst verwendet was ziemlich umhüllt libs.ts.

Jetzt möchte ich ein Skript-Tag oder eine Datei nur für redirect.html und nicht für angular oder index.html hinzufügen, wie mache ich das? Gibt es ein Beispiel, das sich mit zwei oder mehr separaten HTML-Dateien mit einigen gängigen js-Includes vermischt mit einigen eindeutigen html-spezifischen js-Dateien beschäftigt?

Answer 1

Das ist, was ich tun endete, habe ich ejs als Vorlage Dateityp

new HtmlWebpackPlugin({ 
    filename: 'dropbox.html', 
    template: 'src/redirect.ejs', 
    chunks:['polyfills','dropbox','lib'], 
    //model for ejs 
    redirectPage:'Dropbox' 
}) 

dann dropbox.template.ejs innen

<script> 
    var redirectPage = '<%= htmlWebpackPlugin.options.redirectPage %>';//'Dropbox' 
</script> 

Answer 2

verwendete ich die CopyWebpackPlugin eine separate statische HTML und JS-Datei zu kopieren, die für den Rückruf verwendet wird https://www.npmjs.com/package/copy-webpack-plugin

So Ihre webpack Datei so etwas wie dieses

plugins: [ 
new webpack.optimize.CommonsChunkPlugin({ 
    name: ['app', 'lib', 'vendor', 'polyfills'] 
}), 
new HtmlWebpackPlugin({ 
    filename:'index.html' 
    template: 'src/index.html' 
}), 
new CopyWebpackPlugin([ 
    { context: "src/dropbox", from: "**/*" } 
]) 
] 

wäre Wo in src/Dropbox Sie Setzen Sie den Rückruf dropbox.html und dropbox_lib.js. Dieser Code wird diese zwei Dateien in den Root-Ordner dist setzen. Also sollten Sie in der Lage sein zu schlagen http://example.com/dropbox.html

Ich habe nicht herausgefunden, wie Sie die css in der wichtigsten eckigen App in diese HTML-Datei eingesetzt.

PS ich ziemlich neu bin zu webpack