Wie separiert man index.html und Assets in webpack-dev-server?

Ich möchte folgende Build-Ordnerstruktur haben:Wie separiert man index.html und Assets in webpack-dev-server?

/build/index.html
/build/static/bundlename.js
/build/static/bundlename.css
/Aufbau/static/img/*
/build/static/fonts/*

Wie kann ich das erreichen? Ich habe dies durch add/static Präfix zu bundlename selbst für Webpack normalen Build selbst herausgefunden. Aber wenn ich diese Konfiguration in webpack-dev-server starte, werden keine Dateien von/static/path ausgeführt.

Ich benutze file-loader und url-loader für Fonts, wie kann ich ihren Pfad auch ändern? Sie erscheinen in/build root und ich möchte sie im Ordner/static/fonts.

Ich benutze html-webpack-plugin, um index.html zu generieren und Stile zu verknüpfen (habe keine Ahnung, warum Webpack sie aus js standardmäßig hinzufügen möchten, es ist Verrücktheit, nur als Option kann ich sehen, aber nicht als Standard Weg)

Ich laufe Webpack von Schluck.

Sie können meine Konfiguration hier sehen. https://github.com/rantiev/template-angular

Vielen Dank im Voraus.

Quelle

2016-03-19 Rantiev

können Sie angeben output.path:

output: { 
    path: "build/static", 
    publicPath: "/static/" 
}

und Änderung Weg von index.html zu ../index.html in html-webpack-Plugin

Quelle

2016-03-19 19:43:17

Es funktioniert in webpack Build versuchen wollen, aber nicht funktioniert, wenn ich es mit webpack-dev-sever laufen. Weder beim Öffnen/oder/statisch Webpack-dev-Server gibt nichts. Ich habe publicPath hinzugefügt, den Pfad zu index.html geändert, um mit ../ zu gehen, publicPath + historyApiFallback zu webpack-dev-server hinzugefügt. Das Problem ist, dass ich nicht mit devserver arbeiten kann, nicht mit webpack simple build. Haben Sie das mit webpack-dev-server selbst probiert? Bitte geben Sie Ihre Einstellungen an, wenn dies der Fall ist. Coole Idee, aber funktioniert nicht für mich. Könnte etwas falsch gemacht haben. – Rantiev

Tut mir leid, aber ich benutze nicht webpack-dev-server, trotzdem habe ich versucht, es funktioniert aber luck Glück :( –

Sie haben output.path, output.publicPath & output.filename (see here)
output.path Option die bestimmt Speicherort auf der Festplatte werden die Dateien geschrieben

In Ihrem Fall sollten Sie path: path.resolve(__dirname, 'build')
dass die index.html vom HtmlWebpackPlugin in Ihr build Verzeichnis abgelegt werden.

output.filename

Gibt den Namen der einzelnen Ausgabedatei auf dem Datenträger. Sie müssen keinen absoluten Pfad hier angeben! Die Option output.path bestimmt den Speicherort auf der Festplatte die Dateien geschrieben werden. Dateiname wird nur für die Benennung der einzelnen Dateien verwendet.

In Ihrem Fall Sie wollen filename: './static/bundlename.js'
Das wird die gebündelte JS in den statischen Verzeichnis setzen

Um die CSS in Ihre statische Verzeichnis erhalten Sie die ExtractTextPlugin benötigen.Sobald Sie das wollen Sie bekommen etwas in Ihrem webpack Plugins wie new ExtractTextPlugin('static/bundlename.css')

Für Ihre Bilder & Schriftarten setzen möchten, können Sie in Ihren Lader etwas wie folgt angeben:

{ 
    test: /\.(ttf|otf|eot|woff|woff2)$/ 
    include: [ 
     path.resolve(__dirname, 'font location here') 
    ], 
    loader: 'url', 
    query: { 
     limit: 10000, 
     name: 'static/fonts/[name].[ext]' 
    } 
    }, 
    { 
    test: /\.svg$/, 
    include: [ 
     path.resolve(__dirname, 'image location here') 
    ], 
    loader: 'file', 
    query: { 
     limit: 10000, 
     minetype: 'image/svg+xml', 
     name: 'static/img/[name].[ext]' 
    } 
    }

output.publicPath gibt die öffentliche URL-Adresse der Ausgabedateien, wenn sie in einem Browser referenziert werden. Sie könnten
publicPath: http://localhost:8000/ und schauen Sie sich diese Webpack "OTS parsing error" loading fonts

Quelle

2016-12-04 04:06:56

Wie separiert man index.html und Assets in webpack-dev-server?

Antwort

Verwandte Themen