需要帮助了解古普和webpack流是如何工作的

Question

所以我有一个杯状文件(工作)和一个Webpack文件(工作文件)。现在我想把它们结合起来，这样我只需要运行webpack就可以监视和编译SCSS文件。

看看webpack主页，我可以用一种叫做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是什么？
• 这段代码是做什么的？

上面的代码将使用webpack将src/entry.js编译成带有hash.js输出文件名的dist/输出文件名(webpack生成构建的散列)。 或者直接传入你的webpack.config.js：

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

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

我想我需要用茶匙递给我:-/

更新

我得到了来自@kannix和@JMM的帮助。以下是我的配置文件：

Gulp

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

Answer 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流的输出随后被写入dist/。

entry.js是webpack入境点

第二个例子做的几乎一样，但它将最有可能从您的webpack.config.js中读取额外的webpack配置。

Answer 2

1. 是的，该代码是为一个吞咽文件设计的。
2. entry.js是什么？

通常，当你和Webpack这样的东西捆绑在一起时，你会有一个运行你的应用程序的脚本，它是你的依赖关系图的条目。这就是entry.js所指的。

1. 这段代码是做什么的？

这里有一个评论版本：

var gulp = require('gulp')；var webpack = require('webpack-stream')；gulp.task('default‘)，函数{ // Read src/entry.js in作为乙烯基文件返回gulp.src('src/entry.js') //将entry.js发送到这个webpack-stream模块。.pipe(webpack()) //将webpack-stream的输出发送给dist/ .pipe(gulp.dest(‘dist/’)；})；