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


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

目前，我们将Webpack用于模块加载程序，并将Gulp用于其他所有功能(sass-> css，以及开发/生产构建过程)

我想将webpack的内容包装到gulp中，所以我所要做的就是键入gulp，它会启动，监视并运行webpack以及其余的gulp设置。

所以我找到了webpack-stream并实现了它。

1
2
3
4
5
6
7
8
9
10
11
12
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仓库：

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任务都会生成一个新文件：

enter image description here

我不能使用c2212af8f732662acc64.js，我需要将其命名为bundle.js或其他正常名称。

我们的Webpack配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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})
    ] : []
};

关于Leon Gaban的webpack.config.js的外观，有一个评论。与其在评论中回答，不如在此提供它，以便更好地设置格式。

根据webpack-stream的文档，"您可以将webpack选项与第一个参数一起传入" ...

因此，我执行以下操作来强制Webpack每次都使用相同的输出名称(对我来说，我使用bundle.js)：

1
2
3
4
5
6
7
8
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()中的选项，它们是：

1
{output: {filename: 'bundle.js'} }
相关讨论

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

1
2
3
4
5
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中有了该路径。

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

相关讨论

按照docs中的建议，您应该在webpack-stream之前在管道上使用vinyl-named包。这样，您可以使用更简洁的Webpack配置。以下是我自己使用的任务定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
'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。

相关讨论

与其给您的javascript一个固定的文件名，不如一个更好的解决方案是使用gulp-inject并将生成的哈希文件名插入脚本标签。这意味着您不必担心编译的javascript上的缓存过期(这就是为什么首先使用哈希文件名的原因)。

1
2
3
4
5
6
7
8
9
10
11
12
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中的注入部分：

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
  index page
</head>
<body>

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