webentwicklung-frage-antwort-db.com.de

Wie verwende ich gulp webpack-stream, um eine richtig benannte Datei zu erzeugen?

Derzeit verwenden wir Webpack für unseren Modullader und Gulp für alles andere (sass -> css und den Entwicklungsprozess von dev/production).

Ich möchte das Webpack-Zeug in Schluck packen, also muss ich nur noch gulp eingeben und es startet, sieht und läuft Webpack und der Rest von dem, was unser Schluck einrichten soll.

Also habe ich webpack-stream gefunden und implementiert.

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 einen zufälligen Zeichennamen für die .js-Datei generiert. Wie soll dieser Wert in unserer App verwendet werden?

Aus dem Github Repo :

Das obige kompiliert src/entry.js mit webpack zu assets in dist/mit dem Ausgabedateiname [hash] .js (von webpack generierter Hash des Build).

Wie benennen Sie diese Dateien um? Auch die neue gulp-Task erzeugt jedes Mal, wenn ich eine Bearbeitung speichere, eine neue Datei:

 enter image description here

Ich kann c2212af8f732662acc64.js nicht verwenden. Ich brauche den Namen bundle.js oder etwas anderes normales.

Unsere Webpack-Konfiguration:

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})
    ] : []
};
12
Leon Gaban

Ah, ich las ein bisschen weiter und habe es herausgefunden:

gulp.task('webpack', function() {
    return gulp.src('entry.js')
    .pipe(webpack( require('./webpack.config.js') ))
    .pipe(gulp.dest('app/assets/js'));
});

^ hier kann ich einfach meine eigentliche webpack.config übergeben und es wird die Pfade verwenden, die ich dort bereits gesetzt habe. In meinem Fall habe ich gerade app/assets/js entfernt, da ich stattdessen diesen Pfad in gulp habe.

Immer noch keine irdische Idee. Warum erzeugt die erste Aufgabe, die ich erstellt habe, zufällige Hash-Dateinamen?

4
Leon Gaban

Es gab einen Kommentar zu Leon Gabans Antwort, wie seine webpack.config.js aussahen. Anstatt das in einem Kommentar zu beantworten, werde ich es hier angeben, damit es besser formatiert wird. 

Gemäß den Dokumenten für webpack-stream "Mit dem ersten Argument können Sie Webpack-Optionen übergeben" ...

Also habe ich folgendes getan, um zu erzwingen, dass webpack jedes Mal den gleichen Ausgabenamen verwendet (für mich verwendete ich bundle.js):

gulp.task('webpack', ['babelify'],
    () => {
        return gulp.src('Scripts/index-app.js')
            .pipe(webpack({output: {filename: 'bundle.js'} }))
            .pipe(debug({ title: 'webpack:' }))
            .pipe(gulp.dest('Scripts/'));

    });

Der Schlüssel sind die Optionen in webpack (), die Folgendes sind:

{output: {filename: 'bundle.js'} }
9
Perry Tew

Wie in Dokumenten empfohlen, sollten Sie das vinyl-named-Paket in der Pipe vor webpack-stream verwenden. Auf diese Weise können Sie eine sauberere Webpack-Konfiguration verwenden. Folgendes ist die Aufgabendefinition, die ich selbst verwende:

'use strict';

const gulp = require('gulp'),
      named = require('vinyl-named'),
      webpack = require('webpack-stream');

gulp.task('webpack', function () {
  gulp.src(['./src/vendor.js', './src/bootstrap.js', './src/**/*.spec.js'])
      .pipe(named())
      .pipe(webpack({
        module: {
          loaders: [
            {
              test: /\.js$/,
              loader: 'babel',
              query: {
                presets: ['es2015', 'angular2']
              }
            }
          ]
        }
      }))
      .pipe(gulp.dest('./build'))
});

Das einzige Problem, dem ich mit dieser Aufgabendefinition gegenüberstehe, ist, dass der Unterordner gelöst ist. Zum Beispiel erzeugt ./src/components/application.spec.js./build/application.spec.js anstelle von ./build/components/application.spec.js.

3
yeiniel

Anstatt Ihrem Javascript einen festen Dateinamen zu geben, wäre es eine bessere Lösung, gulp-inject zu verwenden und den generierten Hash-Dateinamen in ein Skript-Tag einzufügen. Dies bedeutet, dass Sie sich keine Gedanken über den Cache-Ablauf des kompilierten Javascript machen müssen (weshalb der Hash-Dateiname überhaupt verwendet wird).

const inject = require('gulp-inject');

gulp.task('webpack', function() {
    const index = './src/index.html';
    const scripts = gulp.src('entry.js')
    .pipe(webpack( require('./webpack.config.js') ))
    .pipe(gulp.dest('dist/js'));

    return target
       .pipe(inject(scripts))
       .pipe(gulp.dest('dist/'));
});

und natürlich benötigen Sie den Injektionsabschnitt in Ihrem src/index.html:

<!DOCTYPE html>
<html>
<head>
  <title>index page</title>
</head>
<body>

  <!-- inject:js -->
  <!-- endinject -->
</body>
</html>
0
Duncan