web-dev-qa-db-ja.com

gulp webpack-streamを使用して適切な名前のファイルを生成する方法は？

現在、モジュールローダーにWebpackを使用しており、Gulpその他すべて（sass-> css、およびdev/productionビルドプロセス）

私はwebpackのものをgulpにラップしたいので、gulpと入力するだけで、webpackの起動、監視、実行、およびgulpが実行するように設定されている残りの処理を行います。

だから私は webpack-stream を見つけて実装しました。

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

問題は、それが.jsファイルのランダムな文字名を生成することです。アプリでそれをどのように使用すると思いますか？

githubリポジトリから ：

上記は、src/entry.jsをwebpackを使用してアセットにコンパイルし、[hash] .js（webpackが生成したビルドのハッシュ）の出力ファイル名を使用してdist /にコンパイルします。

これらのファイルの名前をどのように変更しますか？また、新しいgulpタスクは、編集を保存するたびに新しいファイルを生成します。

enter image description here

c2212af8f732662acc64.jsを使用できませんbundle.jsなどの通常の名前にする必要があります。

私たちの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
14
Leon Gaban

Ah I もう少し読んでください そしてそれを理解しました：

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

^ここで実際のwebpack.configを渡すだけで、既に設定したパスが使用されます。私の場合、私はapp/assets/js代わりに、そのパスを今gulpに持っているので。

それでも地味な考えはありませんが、なぜ私が最初に作成したタスクでランダムなハッシュファイル名が生成されるのですか？

3
Leon Gaban

彼のwebpack.config.jsがどのように見えるかについてのLeon Gabanの回答に対するコメントがありました。コメント内で回答するのではなく、ここで提供することで、より適切にフォーマットされます。

webpack-stream のドキュメントに従って、「最初の引数でwebpackオプションを渡すことができます」...

そこで、次のようにして、毎回webpackが同じ出力名を使用するように強制しました（私にとっては、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/'));

    });

キーはwebpack（）内のオプションです。

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

ドキュメントで推奨されているように、vinyl-namedの前にパイプでwebpack-streamパッケージを使用する必要があります。これにより、よりクリーンなWebpack構成を使用できます。以下は、私が自分で使用するタスク定義です。

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

このタスク定義で直面している唯一の問題は、サブフォルダーが緩んでいることです。たとえば、./src/components/application.spec.jsは、./build/application.spec.jsではなく./build/components/application.spec.jsを生成します。

4
yeiniel

JavaScriptに固定のファイル名を付けるのではなく、gulp-injectを使用して、生成されたハッシュファイル名をスクリプトタグに挿入することをお勧めします。これは、コンパイルされたjavascriptのキャッシュの期限切れを心配する必要がないことを意味します（そのため、最初にハッシュファイル名が使用されます）。

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

もちろん、src/index.htmlに挿入セクションが必要です。

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

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