如何使用gulp webpack-stream生成一个合适的命名文件？

Question

目前我们正在使用Webpack作为我们的模块加载器,而Gulp正在使用其他所有东西(sass - > css和dev/production构建过程)

我想把webpack的东西包装成gulp,所以我要做的就是打字gulp,启动,监视和运行webpack以及我们设置的其余部分.

所以我找到了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为dist /,输出文件名为[hash] .js(webpack生成的构建哈希值).

你如何重命名这些文件？每次保存编辑时,新的gulp任务也会生成一个新文件:

我不能使用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})
    ] : []
};

Answer 1

Leon Gaban回答了他的webpack.config.js的样子.而不是在评论中回答,我在这里提供它,以便更好地格式化.

根据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'} }

Answer 2

按照文档中的建议，您应该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.

Answer 3

啊，我进一步阅读并弄清楚了：

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 。

但仍然没有任何实际的想法，为什么我创建的第一个任务会生成随机哈希文件名？