Question

所以我有一个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？
- 这段代码有什么作用？

上面将使用webpack将src / entry.js编译成资产   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']
                }
            }
        ]
    }
};

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-stream的输出写入dist/

entry.js是webpack entry point

第二个示例几乎相同，但最有可能从您的webpack.config.js

中读取其他webpack配置

Answer 2

是的，该代码是为gulpfile设计的。
什么是entry.js？

通常在捆绑Webpack这样的东西时，你会有一个运行你的app的脚本，并且是你的依赖图的入口。这是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/'));
});

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

2 个答案: