web-dev-qa-db-fra.com

Comment utiliser gulp webpack-stream pour générer un fichier nommé approprié?

Actuellement, nous utilisons Webpack pour notre chargeur de modules et Gulp pour tout le reste (sass -> css et le processus de génération dev/production).

Je veux emballer le contenu de Webpack dans gulp. Tout ce que je dois faire est de taper gulp. Il commence, regarde et exécute Webpack et le reste de ce que notre gulp est configuré pour faire.

J'ai donc trouvé webpack-stream et je l'ai 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 nom de caractère aléatoire pour le fichier .js, comment supposons-nous l’utiliser dans notre application?

Du github repo :

Ce qui précède compilera src/entry.js en actifs avec webpack en dist/avec le nom de fichier de sortie de [hash] .js (hachage généré par webpack de la construction).

Comment renommer ces fichiers? De plus, la nouvelle tâche gulp génère un nouveau fichier chaque fois que j'enregistre une édition:

 enter image description here

Je ne peux pas utiliser c2212af8f732662acc64.js J'ai besoin que ça s'appelle bundle.js ou quelque chose d'autre de normal.

Notre configuration Webpack:

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

Ah je ai lu un peu plus loin et j'ai 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 simplement passer mon webpack.config actuel et il utilisera les chemins que j'ai déjà définis. Dans mon cas, je viens de retirer app/assets/js puisque j'ai maintenant ce chemin dans gulp.

Encore aucune idée terrestre cependant, pourquoi avec la première tâche que j'ai créée, cela génère des noms de fichiers de hachage aléatoires?

4
Leon Gaban

Il y avait un commentaire à la réponse de Leon Gaban sur son webpack.config.js. Plutôt que de répondre à cela dans un commentaire, je le fournis ici pour que le formatage soit meilleur. 

Selon la documentation de webpack-stream , "Vous pouvez passer les options de Webpack avec le premier argument" ...

Donc, j'ai fait ce qui suit pour forcer webpack à 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é étant les options à l'intérieur de webpack (), qui sont:

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

Comme recommandé dans la documentation, vous devez utiliser le package vinyl-named sur le canal avant le webpack-stream. De cette façon, vous pouvez utiliser une configuration Webpack plus propre. Voici la définition de la tâche que 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 rencontre avec cette définition de tâche est que les sous-dossiers sont desserrés. Par exemple, ./src/components/application.spec.js produira ./build/application.spec.js au lieu de ./build/components/application.spec.js.

3
yeiniel

Plutôt que de donner à votre javascript un nom de fichier fixe, une meilleure solution serait d'utiliser gulp-inject et d'insérer le nom de fichier de hachage généré dans une balise script. Cela signifie que vous n'avez pas à vous soucier de l'expiration de la mémoire cache sur le code JavaScript compilé (c'est pourquoi le nom de fichier de hachage est utilisé 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 sur vous avez besoin de la section inject dans votre src/index.html:

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

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