如何使用 gulp webpack-stream 生成正确命名的文件？

Question

目前我们正在使用 Webpack for our Module loader, and 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 文件生成一个随机字符名称，我们应该如何在我们的应用程序中使用它？

From the github repo:

The above will compile src/entry.js into assets with webpack into dist/ with the output filename of [hash].js (webpack generated hash of the build).

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

我不能使用c2212af8f732662acc64.js我需要它被命名为bundle.js或其他正常的名字。

我们的 Webpack 配置：

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_DEV || '0');
// 

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

啊我read on a bit further 想通了:

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。

不过还是不懂，为什么我创建的第一个任务会生成随机哈希文件名？

Answer 2

按照文档中的建议，您应该在 webpack-stream 之前在管道上使用 vinyl-named 包。这样你就可以使用更简洁的 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

Leon Gaban 的回答中有人评论了他的 webpack.config.js 是什么样子。我没有在评论中回答这个问题，而是在此处提供它以使其格式更好。

根据 webpack-stream、"You can pass webpack options in with the first argument"...

的文档

所以，我做了以下操作来强制 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 4

与其给你的 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>

如何使用 gulp webpack-stream 生成正确命名的文件？

How to use gulp webpack-stream to generate a proper named file?

javascript

gulp

webpack

webpack-dev-server