古普-webpack:webpack流在不存在的文件中工作

Question

在这个问题中，Gulp和Webpack是由Webpack-stream集成的，因此Webpack的指令包含在gulpfile.js中。目前，我使用webpack 3.4.1和webpack-流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流的集成是有限的，在.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();
      }
    });
});