webpack - Gulp 和 Webpack : webpack-stream working with non-existent file

Question

在这个问题中，Gulp和 Webpack由 Webpack-stream 集成，所以 Webpack 的说明包含在 gulpfile.js .目前，我使用 webpack 3.4.1 和 webpack-stream 4.0.0。

const   gulp = require('gulp'),
        gulpIf = require('gulp-if'),
        webpackStream = require('webpack-stream'),
        webpack = webpackStream.webpack,
        named = require('vinyl-named');

我需要定义条件输出，然后在 gulp.dest() 中创建函数.感谢 vynil-named ，我们不需要定义入口点，但是要定义输出条件，我们需要知道文件从哪里获取(例如可能是 public 或 admin 路径)。

内 gulp.dest() ，它说文件来自 C:\MyIde\projects\testProj\someEntryPoint.js ，但实际上这个文件在 C:\MyIde\projects\testProj\source\public\js\someEntryPoint.js :

gulp.task('webpack', function(){

    /*  Entry points locations:
        C:\MyIde\projects\testProj\source\public\js
        C:\MyIde\projects\testProj\source\admin\js  */

    return gulp.src('source')
        .pipe(named())
        .pipe(webpackStream())
        .pipe(gulp.dest( file => {

            console.log('path: '+ file.path);
            // Output to console: "path: C:\MyIde\projects\testProj\someEntryPoint.js"
            // Real file path:          C:\MyIde\projects\testProj\source\public\js\someEntryPoint.js

在问“如何定义所需的输出路径？”之前，我需要了解发生了什么。我为 pug 定义了输出路径和 sass以同样的方式:没有发生过这样的事情。

更新

答案应该在这里，到底 webpack-stream的 index.js ...

function prepareFile (fs, compiler, outname) {
  var path = fs.join(compiler.outputPath, outname);
  if (path.indexOf('?') !== -1) {
    path = path.split('?')[0];
  }

  var contents = fs.readFileSync(path);

  var file = new File({
    base: compiler.outputPath,
    path: nodePath.join(compiler.outputPath, outname),
    contents: contents
  });
  return file;
}

Answer 1

不幸的是， webpack 与 集成vynil-fs 流是有限的，我们不能对 .pipe(webpackStream()) 之后的文件做任何事情.但是，“gulp 和 webpack 集成”并不意味着“gulp 和 vynil-js 集成”，我们可以为 编写自己的包装器webpack 使其与 gulp 兼容:

const gulplog = require('gulplog'),
      path = require('path'),
      notifier = require('node-notifier'),
      webpack = require('webpack');

gulp.task('webpack', callback => {

    let WebpackOptions = {

      entry: // define your entry points...

      output: {
          path: // define your output path...
          filename: '[name].js'
      }

      watch: // define watch mode depenend on build...
    };

    webpack(WebpackOptions, (error, statistics) => {

      if (!error) {
        error = statistics.toJson().errors[0];
      }

      if (error) {

        notifier.notify({
          title: 'webpack',
          message: error
        });

        gulplog.error(error);

      } else {

        gulplog.info(statistics.toString({
            colors: true
        }));
      }


      if (!WebpackOptions.watch && error) {
        // for production build
        callback(error);
      }
      else {
        callback();
      }
    });
});