Question

我正在创建一个nodejs应用程序，因为它不支持模块加载（导入）功能，但我想利用babel / webpack来做到这一点。

有人可以帮我设置它，以便运行我的服务器，编译所有内容，只需运行“gulp”即可检查更改

咕嘟咕嘟：

var gulp       = require('gulp');
var nodemon    = require('gulp-nodemon');
var notify     = require('gulp-notify');
var livereload = require('gulp-livereload');
var webpack    = require('webpack-stream');

gulp.task('es6', () => {

    return gulp.src('index.js')
               .pipe(webpack(require('./webpack.config.js')));
});

gulp.task('listen', () => {

    livereload.listen();

    nodemon({
        script: 'index.js',
        ext: 'js'
    }).on('restart', () => {
        gulp.src('index.js')
            .pipe(livereload())
            .pipe(notify('Reloading page, please wait...'));
    });

});

gulp.task('default', ['es6', 'listen'], () => {
});

的WebPack：

module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel', // 'babel-loader' is also a legal name to reference
            query: {
                presets: ['es2015']
            }
        }
    ]
}

Answer 1

查看此存储库我为您创建了一个示例。

https://github.com/synthecypher/babel-gulp-webpack

const gulp             = require('gulp');
const gutil            = require('gulp-util');
const webpack          = require('webpack');
const WebpackDevServer = require('webpack-dev-server');

// webpack-dev-server will build files and serve them from memory (no files written to disk).
gulp.task('default', (callback) => {
  let config = require('./webpack.config');
  config.entry.app.unshift(`webpack-dev-server/client?http://${config.devServer.host}:${config.devServer.port}/`);
  new WebpackDevServer(new webpack(config), config.devServer)
    .listen(config.devServer.port, config.devServer.host, (err) => {
      if (err) throw new gutil.PluginError('webpack-dev-server', err);
      gutil.log(gutil.colors.cyan(`http://${config.devServer.host}:${config.devServer.port}`));
    });
});

// output will be built to the `dist` folder.
gulp.task('build', (callback) => {
  let config = require('./webpack.config.js');
  webpack(config, (err, stats) => {
    if (err) throw new gutil.PluginError("webpack", err);
    stats.toString(config.devServer.stats).split('\n').map((line) => {
      gutil.log(gutil.colors.blue("[webpack]"), line);
    });
    callback();
  });
});

如何使用Babel和Webpack设置Gulp

1 个答案: