需要帮助了解 gulp 和 webpack-stream 的工作原理

Posted 2023-03-08

【中文标题】需要帮助了解 gulp 和 webpack-stream 的工作原理

【英文标题】：Need help understanding how gulp and webpack-stream works

【发布时间】：2016-08-28 13:25:24

【问题描述】：

所以我有一个 Gulp 文件（工作）和一个 Webpack 文件（工作）。现在我想将这些结合起来，这样我只需要运行 webpack 就可以查看和编译 SCSS 文件。

看着webpack home page，我可以用一个叫webpack-stream的东西

var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() 
  return gulp.src('src/entry.js')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
);

我不明白我在这里读到什么。而且我不熟悉管道。 - 第一段代码，是否进入 gulpfile.js？ - entry.js 是什么？ - 这段代码有什么作用？

以上将 src/entry.js 编译成 assets 用 webpack 放入 dist/ 输出文件名为 [hash].js （webpack 生成的 构建）。

或者直接传入你的 webpack.config.js：

return gulp.src('src/entry.js')
  .pipe(webpack( require('./webpack.config.js') ))
  .pipe(gulp.dest('dist/'));

我猜这会进入我的 gulpfile.js？

我想我需要用茶匙把这个递给我：-/

更新

在@kannix 和@JMM 的帮助下，我得到了它的帮助。这是我的配置文件：

吞咽

var gulp = require('gulp');
var sass = require('gulp-sass');
var webpack = require('webpack-stream');

gulp.task('default', [
    'webpacker',
    'sass',
    'watch'
]);

gulp.task('webpacker', function() 
    return gulp.src('./src/index.js')
        .pipe(webpack(require('./webpack.config.js')))
        .pipe(gulp.dest('dist/'));
);


gulp.task('sass', function () 
    return gulp
        .src('./src/sass/main.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css/'));
);

gulp.task('watch', function() 
        gulp.watch('./src/sass/*.scss', ['sass']);
        gulp.watch('./src/components/*.jsx', ['webpacker']);
);

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = 
    entry: "./src/index.js",
    output: 
        path: __dirname + "/js/",
        filename: "bundle.js"
    ,
    module: 
        loaders: [
            
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: 
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                
            
        ]
    
;

【参考方案1】：

gulp.task('default', function() 
  return gulp.src('src/entry.js')
    .pipe(webpack())
    .pipe(gulp.dest('dist/'));
);

是的，这是来自 gulpfile.js 的代码。 这告诉 gulp 读取 src/entry.js 并将文件内容流式传输到 webpack-stream gulp 插件。然后将 webpack-stream 的输出写入dist/

entry.js 是webpack entry point

第二个例子的作用几乎相同，但它很可能会从您的webpack.config.js 中读取额外的 webpack 配置

【讨论】：

谢谢。现在我收到一条错误消息。这可能是由我的 webpack 配置文件引起的吗？请参阅我更新的问题。

很可能是的......所以请也发布你的 webpack 配置......也许你应该尝试让 webpack 在没有 gulp 的情况下运行，如果它按预期工作，你可以开始将它集成到你的 gulp 配置中;)

是的。我在那里有一些 Gulp 配置。它不喜欢那样。删除它就可以了。

【参考方案2】：

是的，该代码是为 gulpfile 设计的。

什么是 entry.js？

通常在与 Webpack 之类的东西捆绑时，您将拥有一个运行您的应用程序的脚本，并且是您的依赖关系图的入口。这就是entry.js 所指的。

这段代码有什么作用？

这是一个注释版本：

var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function() 
  // Read `src/entry.js` in as a vinyl file
  return gulp.src('src/entry.js')
    // Send `entry.js` to this `webpack-stream` module.
    .pipe(webpack())
    // Send the output of `webpack-stream` to `dist/`
    .pipe(gulp.dest('dist/'));
);