首页 文章

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

提问于
浏览 次
3

所以我有一个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编译成资产，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？

我想我需要用茶勺递给我： - /

Update

我得到了@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']
                }
            }
        ]
    }
};
node.js sass gulp webpack

2 回答

  • 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配置

    回复于
  • 1

    • 是的，该代码是为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/'));
});
    回复于

相关问题