Jak używać gipp webpack-stream do generowania odpowiedniego nazwanego pliku?

Question

Obecnie używamy Webpack dla naszej ładowarki moduł, a Gulp do wszystkiego innego (Sass -> css i/dev proces budowania produkcja)

chcę owijać rzeczy WebPACK do haustem, więc wszystko, co muszę zrobić, to wpisać: gulp i uruchamia się, ogląda i uruchamia Webpack i resztę tego, co nasz ustnik ma zrobić.

Więc znalazłem webpack-stream i zaimplementowałem go.

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

Problemem jest to, że generuje losową nazwę znaków dla pliku .js, jak jesteśmy przypuszczać, aby użyć tego w naszej aplikacji?

From the github repo:

Powyższy będzie opracować src/entry.js do wartości z WebPacka w dist/z pliku wyjściowego [skrót] js (WebPack generowane mieszania kompilacji).

Jak zmienić nazwy tych plików? Również nowe zadanie łyk generuje nowy plik za każdym razem zapisać EDIT:

Nie mogę korzystać c2212af8f732662acc64.js potrzeba mi to być nazwany bundle.js lub coś innego normalnej.

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

Answer 1

Ach ja read on a bit further i zorientowaliśmy się:

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

^tu mogę tylko przekazać w moim rzeczywistego webpack.config i użyje ścieżki mam już tam jest. W moim przypadku właśnie usunąłem app/assets/js, ponieważ zamiast tego mam teraz tę ścieżkę.

Nadal nie ma ziemskiego pomysłu, dlaczego z pierwszym zadaniem, które stworzyłem, generuje przypadkowe nazwy plików hash?

Answer 2

Zgodnie z zaleceniami w dokumentach należy użyć pakietu vinyl-named na rurze przed webpack-stream. W ten sposób możesz użyć bardziej przejrzystej konfiguracji Webpack. Poniżej znajduje się definicja zadanie używam sobie:

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

Jedyny problem jestem stoi z tej definicji jest to, że zadania są rozwiązane podfolder. Na przykład ./src/components/application.spec.js będzie produkować ./build/application.spec.js zamiast ./build/components/application.spec.js.

Answer 3

Pojawił się komentarz do odpowiedzi Leona Gabana na pytanie, jak wyglądał jego plik webpack.config.js. Zamiast odpowiadać na to w komentarzu, udostępniam go tutaj, aby był lepiej sformatowany.

Dla dokumentów dla webpack-stream, "Możesz podać opcje pakietu WebPack z pierwszym argumentem" ...

Więc zrobiłem następujące zmusić WebPACK używać tej samej nazwy wyjścia za każdym razem (dla mnie, użyłem 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/')); 

    }); 

Kluczem są opcje wewnątrz WebPack(), która są:

{output: {filename: 'bundle.js'} } 

Answer 4

Zamiast dając JavaScript ustaloną nazwę pliku, lepszym rozwiązaniem byłoby wykorzystanie gulp-inject i wstawić wygenerowany hash pliku do znacznika script. Oznacza to, że nie musisz się martwić o wygaśnięcie pamięci podręcznej na skompilowanym javascriptie (dlatego nazwa pliku hash jest używana w pierwszej kolejności).

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

i oczywiście trzeba sekcję wstrzykiwać w swoim src/index.html:

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

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