Comment utiliser gulp webpack-flux afin de générer un bon nom de fichier?

Actuellement nous utilisons Webpack pour notre chargeur de Module, et Gulp pour tout le reste (sass -> css, et la dev/production processus de construction)

Je veux enrouler le webpack des trucs dans gulp, donc tout ce que j'ai à faire est de taper gulp et il commence, les montres et les pistes de webpack et le reste de ce que notre gulp est le programme d'installation à faire.

J'ai donc trouvé webpack-stream et mis en œuvre.

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'));
});

Le problème est qu'il génère un caractère aléatoire de nom pour la .fichier js, comment pouvons-nous supposer pour l'utiliser dans notre application?

Depuis le dépôt github:

Permettra de compiler src/entry.js en actifs avec webpack dans dist/avec le nom de fichier de sortie de [hash].js (webpack de hachage généré de la construction).

Comment voulez-vous renommer ces fichiers? Aussi la nouvelle gorgée tâche génère un nouveau fichier à chaque fois que je enregistrer un edit:

Comment utiliser gulp webpack-flux afin de générer un bon nom de fichier?

Je ne peux pas utiliser c2212af8f732662acc64.js j'en ai besoin pour être nommé bundle.js ou quelque chose d'autre de la normale.

Notre 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})
    ] : []
};

OriginalL'auteur Leon Gaban | 2016-03-18

9

Il y avait un commentaire à Leon Gaban de réponse quant à son webpack.config.js ressemblait. Plutôt que de répondre que, dans un commentaire, je vous fournis ici pour il formats mieux.

Par les docs pour webpack-stream", Vous pouvez passer webpack options avec le premier argument"...

Donc, je n'ai la suite à force webpack d'utiliser le même nom de sortie à chaque fois (pour moi, j'ai utilisé 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/'));

    });
```
À la clé les options à l'intérieur de webpack(), qui sont:
```
{output: {filename: 'bundle.js'} }
```
Après beaucoup de dents-les grincements et sur le web à la recherche, en passant ce simple objet de config était la solution la plus simple que j'ai trouvé.

OriginalL'auteur Perry Tew
4

Ah je lire un peu plus loin et compris:
```
gulp.task('webpack', function() {
    return gulp.src('entry.js')
    .pipe(webpack( require('./webpack.config.js') ))
    .pipe(gulp.dest('app/assets/js'));
});
```
^ ici je peux juste passer dans ma réelle webpack.config et il va utiliser les chemins de j'ai déjà. Dans mon cas, j'ai juste enlevé app/assets/js depuis que j'ai ce chemin en maintenant gulp à la place.

Toujours pas terrestre, idée, pourquoi la première tâche, j'ai créé, il génère aléatoirement les noms de fichiers de hachage?

C'est la valeur par défaut ('[hash].js') si aucun point d'entrée est spécifié (dans le cas contraire, le nom de fichier sera '[name].js') github.com/shama/webpack-stream/blob/master/index.js#L98
gabam ce n'votre webpack.config.js fichier ressemble?
Paul, voir ma réponse ci-dessous qui montre un exemple de l'webpack.config.js options nécessaires à la force le même nom de fichier à chaque fois.
L'aléatoire de nom de fichier de hachage garantit que vous de sélectionner la bonne version des scripts lorsque vous mettez à jour votre serveur de production et vous avez dit à tout le monde qu'ils peuvent mettre en cache l'ancien bundle pour une année.

OriginalL'auteur Leon Gaban

Comme recommandé dans les docs, vous devez utiliser le vinyl-named paquet sur le tuyau avant de webpack-stream. De cette façon, vous pouvez utiliser un nettoyeur de Webpack de configuration. Voici la définition de tâche j'utilise moi-même:

'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'))
});

Le seul problème que je suis face à cette tâche de définition, c'est que le sous-dossier sont relâchés. Par exemple ./src/components/application.spec.js produira ./build/application.spec.js au lieu de ./build/components/application.spec.js.

J'aime cette solution que je n'ai pas à taper le nom de mon fichier deux fois, le vinyle, appelé paquet, il le fait pour moi.
Si quelqu'un est encore de lire ceci, vous pouvez utiliser vinyl-named-with-path au lieu d'enregistrer les sous-dossiers

OriginalL'auteur yeiniel

Plutôt que de donner votre javascript fixe, nom de fichier, une meilleure solution serait d'utiliser gulp-inject et insérez le hachage généré nom de fichier dans une balise script. Cela signifie que vous n'avez pas à vous soucier de cache expiration sur l'compilé en javascript (c'est pourquoi le nom de fichier de hachage est utilisée en premier lieu).

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/'));
});

et bien sûr, vous avez besoin d'injecter de l'article dans votre src/index.html:

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

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

OriginalL'auteur Duncan

Vous devez vous connecter pour publier un commentaire.