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

前端未结

关注

 4  1364

Currently we\'re using Webpack for our Module loader, and Gulp for everything else (sass -> css, and the dev/production build process)

相关标签:

4条回答

盖世英雄少女心

2021-02-19 03:50
Ah I read on a bit further and figured it out:
```
gulp.task('webpack', function() {
    return gulp.src('entry.js')
    .pipe(webpack( require('./webpack.config.js') ))
    .pipe(gulp.dest('app/assets/js'));
});
```
^ here I can just pass in my actual webpack.config and it will use the paths I have already set in there. In my case I just removed app/assets/js since I have that path in now gulp instead.

Still no earthly idea though, why with the first task I created, it generates random hash filenames?
0 讨论(0)
发布评论:

提交评论
- 加载中...

爱一瞬间的悲伤

2021-02-19 03:54

As recommended in docs you should use the vinyl-named package on the pipe before webpack-stream. This way you can use a more cleaner Webpack configuration. The following is the task definition i use myself:

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

The only problem i'm facing with this task definition is that the subfolder are loosed. For example ./src/components/application.spec.js will produce ./build/application.spec.js instead of ./build/components/application.spec.js.

0 讨论(0)

暗喜

2021-02-19 03:57

Rather than giving your javascript a fixed filename, a better solution would be to use gulp-inject and insert the generated hash filename into a script tag. This means you don't have to worry about cache expiry on the compiled javascript (which is why the hash filename is being used in the first place).

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

and of course you need the inject section in your src/index.html:

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

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

0 讨论(0)

北海茫月

2021-02-19 04:03
There was a comment to Leon Gaban's answer as to what his webpack.config.js looked like. Rather than answer that within a comment, I'm providing it here so it formats better.

Per the docs for webpack-stream, "You can pass webpack options in with the first argument"...

So, I did the following to force webpack to use the same output name each time (for me, I used 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/'));

    });
```
The key being the options inside webpack(), which are:
```
{output: {filename: 'bundle.js'} }
```
0 讨论(0)
发布评论:

提交评论
- 加载中...