需要帮助了解吞咽和webpackstream如何工作

所以我有一个Gulp文件（工作）和一个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/')); }); 

我不明白我在这里读到什么。 而且我不会用pipe道来家庭。
– 第一段代码，这是否进入gulpfile.js？
– 什么是entry.js？
– 这段代码是做什么的？

上面的代码将src / entry.js编译成带有webpack的资源，输出文件名是[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的帮助下得到了它的工作。 这是我的configuration文件：

吞

 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的代码。 这告诉大家读取src/entry.js并将文件的内容streamwebpack-stream到webpack-stream插件。 然后将webpack-stream的输出写入dist/

entry.js是webpack的入口点

第二个例子几乎是一样的，但它会从你的webpack.config.js读取更多的webpackconfiguration

Answer 2

1. 是的，这个代码是为一个大文件而devise的。

2. 什么是entry.js？

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

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

   这是一个注释版本：

    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/')); });