Javascript 如何使用Gulp中的Webpack将文件输出到源目录的父目录？

到目前为止，我得到了以下代码：

我的文件夹结构如下：

site1/lib/app.js
site2/lib/app.js

我想创建如下输出文件，每个文件只包含各自lib/app.js文件的代码（以及其中生成的任何require（））：

然而，我现在的代码只是输出到项目的根目录。我尝试了几种组合，例如删除

{base:'.}

，但没有任何效果。但是，如果我删除

named（）

和

webpack（）

管道，那么当前代码实际上会输出到正确的目录。所以，在这个过程中，网页包似乎丢失了原始目录信息

---

此外，还可以获得一个与Webpack的“watch:true”选项配合使用的解决方案，以便快速编译修改后的文件，与其使用Gulp在每次文件更改时总是遍历每个文件？

我假设您希望为每个站点创建一个

app.js

，该站点只打包该站点（而不是其他站点）的代码

在这种情况下，您可以使用来有效地迭代所有

app.js

文件，并将每个文件发送到自己的流中。然后，您可以使用node.js内置程序找出每个

app.js

文件的父目录的位置，并使用

gulp.dest（）

将其写入其中

如果你想使用

webpack（{watch:true}）

你必须使用不同的方法。以下代码用于迭代所有

app.js

文件。每个

app.js

文件都会再次发送到自己的流中，但是这次所有流都是在返回之前发送的

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var path = require('path');
var merge = require('merge-stream');
var glob = require('glob');

gulp.task('default', function() {
  return merge.apply(null, glob.sync('*/lib/app.js').map(function(file) {
    var parentDir = path.dirname(path.dirname(file));
    return gulp.src(file)
      .pipe(named())
      .pipe(webpack({watch:true}))
      .pipe(gulp.dest(parentDir));
  }));
});

---

我假设您希望为每个站点创建一个

app.js

，该站点只打包该站点（而不是其他站点）的代码

在这种情况下，您可以使用来有效地迭代所有

app.js

文件，并将每个文件发送到自己的流中。然后，您可以使用node.js内置程序找出每个

app.js

文件的父目录的位置，并使用

gulp.dest（）

将其写入其中

如果你想使用

webpack（{watch:true}）

你必须使用不同的方法。以下代码用于迭代所有

app.js

文件。每个

app.js

文件都会再次发送到自己的流中，但是这次所有流都是在返回之前发送的

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var path = require('path');
var merge = require('merge-stream');
var glob = require('glob');

gulp.task('default', function() {
  return merge.apply(null, glob.sync('*/lib/app.js').map(function(file) {
    var parentDir = path.dirname(path.dirname(file));
    return gulp.src(file)
      .pipe(named())
      .pipe(webpack({watch:true}))
      .pipe(gulp.dest(parentDir));
  }));
});

---

如果我这样做，那么Webpack的“watch:true”会起作用吗？还是会因为它为每个流创建了一个新的观察者而不起作用？不会起作用，因为第一个观察者会阻止一切。您必须使用常规的

gulp.watch（）

而不是

webpack（{watch:true}）

。如果你真的想使用

webpack（{watch:true}）

你必须合并各个流（参见我的编辑）。好的，谢谢。另外，是否可以通过gulp coffee或gulp concat运行源文件，然后以某种方式将其传递到Webpack来修改源文件？我在管道中得到错误

//未处理的流错误。

当我尝试时。不同的主题。打开一个新问题。好的，谢谢。如果我这样做，那么Webpack的“watch:true”会起作用吗？还是会因为它为每个流创建了一个新的观察者而不起作用？不会起作用，因为第一个观察者会阻止一切。您必须使用常规的

gulp.watch（）

而不是

webpack（{watch:true}）

。如果你真的想使用

webpack（{watch:true}）

你必须合并各个流（参见我的编辑）。好的，谢谢。另外，是否可以通过gulp coffee或gulp concat运行源文件，然后以某种方式将其传递到Webpack来修改源文件？我在管道中得到错误

//未处理的流错误。

当我尝试时。不同的主题。打开一个新问题。好的，谢谢。

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var foreach = require('gulp-foreach');
var path = require('path');

gulp.task('default', function() {
  return gulp.src('*/lib/app.js')
    .pipe(foreach(function(stream, file) {
      var parentDir = path.dirname(path.dirname(file.path));
      return stream
        .pipe(named())
        .pipe(webpack())
        .pipe(gulp.dest(parentDir));
    }));
});

var gulp = require('gulp');
var webpack = require('webpack-stream');
var named = require('vinyl-named');
var path = require('path');
var merge = require('merge-stream');
var glob = require('glob');

gulp.task('default', function() {
  return merge.apply(null, glob.sync('*/lib/app.js').map(function(file) {
    var parentDir = path.dirname(path.dirname(file));
    return gulp.src(file)
      .pipe(named())
      .pipe(webpack({watch:true}))
      .pipe(gulp.dest(parentDir));
  }));
});