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?

Aus der github repo:

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:

Wie zu verwenden Schluck webpack-stream zu generieren eine richtige Datei?

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})
    ] : []
};
InformationsquelleAutor Leon Gaban | 2016-03-18
Schreibe einen Kommentar