Wie zu verwenden Schluck webpack-stream zu generieren eine richtige Datei?
Derzeit sind wir mit Webpack für unser Modul-loader, und Gulp für alles andere (sass -> css und der dev/production-build-Prozess)
Möchte ich wickeln Sie das webpack Zeug zu schlucken, so alles, was ich tun müssen, ist geben Sie gulp
und es beginnt, Uhren und läuft webpack und der rest von dem, was unsere gulp-setup zu tun.
Also ich fand webpack-stream und umgesetzt.
gulp.task('webpack', function() {
return gulp.src('entry.js')
.pipe(webpack({
watch: true,
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' },
],
},
}))
.pipe(gulp.dest('dist/bundle.js'));
});
Das problem ist, dass es erzeugt einen zufälligen Charakter Namen für die .js-Datei, wie sind wir angenommen zu nutzen, dass in unserer app?
Den oben kompilieren src/entry.js in Anlagen mit webpack in dist/mit den Namen der Ausgabedatei von [hash].js (webpack generierte hash erstellen).
Wie Sie diese Dateien umbenennen? Auch die neuen gulp-task erzeugt eine neue Datei jedes mal, wenn ich speichern edit:
Kann ich nicht verwenden c2212af8f732662acc64.js
ich brauche es, genannt zu werden bundle.js oder etwas anderes normal.
Unserer Webpack config:
var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
//http://stackoverflow.com/questions/25956937/how-to-build-minified-and-uncompressed-bundle-with-webpack
module.exports = {
entry: "./entry.js",
devtool: "source-map",
output: {
devtoolLineToLine: true,
sourceMapFilename: "app/assets/js/bundle.js.map",
pathinfo: true,
path: __dirname,
filename: PROD ? "app/assets/js/bundle.min.js" : "app/assets/js/bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({minimize: true})
] : []
};
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gab es einen Kommentar zu Leon Gaban ist die Antwort auf die Frage, was seine webpack.config.js sah aus wie. Anstatt zu Antworten, dass in einem Kommentar, ich bin, sofern es hier so Formate besser.
Pro die docs für webpack-stream, "Sie können gehen webpack Optionen im mit dem ersten argument"...
So, ich habe die folgenden zu zwingen, webpack, um die gleiche output-Namen jedes mal (für mich, ich verwendet bundle.js):
Der-Taste die Optionen innerhalb webpack(), welche sind:
Ah ich Lesen Sie weiter, ein bisschen weiter und es herausgefunden:
^ hier kann ich einfach in meinem aktuellen webpack.config und verwenden die Pfade habe ich bereits drin. In meinem Fall habe ich einfach entfernt
app/assets/js
da ich diesen Weg jetzt zu schlucken, statt.Immer noch keine irdische Idee, warum bei der ersten Aufgabe, die ich erstellt habe, generiert er zufällige hash-Dateinamen?
'[hash].js'
), wenn kein Eintrittspunkt spezifiziert wird (im entgegengesetzten Fall, mit dem Namen wird'[name].js'
) github.com/shama/webpack-stream/blob/master/index.js#L98webpack.config.js
- Datei Aussehen?Als empfohlen in docs sollten Sie die
vinyl-named
Paket, auf dem Rohr, bevorwebpack-stream
. Auf diese Weise können Sie verwenden Sie mehr Reiniger Webpack-Konfiguration. Im folgenden wird der task definition, die ich selbst benutze:Das einzige problem bin ich konfrontiert mit dieser Aufgabenstellung ist, dass die Unterordner sind gelöst. Zum Beispiel
./src/components/application.spec.js
produzieren./build/application.spec.js
statt./build/components/application.spec.js
.vinyl-named-with-path
statt zu sparen, die UnterordnerAnstatt dem javascript einen festen Dateinamen, eine bessere Lösung wäre die Verwendung
gulp-inject
und fügen Sie den generierten hash mit dem Namen in einem script-tag. Dies bedeutet, Sie müssen nicht befürchten, cache Ablauf auf das kompilierte javascript (das ist der Grund, warum die hash-Dateinamen verwendet wird, in den ersten Platz).- und natürlich benötigen Sie injizieren Abschnitt in Ihrem
src/index.html
: