在Gulp Task中从Browserify迁移到Webpack

Question

我对自动化任务很陌生，所以我可能会在这里稍微离开。我有一个gulp任务，使用Browserify来构建我的核心JS文件。

/*jslint node: true */
'use strict';

var args = require('yargs').argv,
   bowerJson = require('../../bower.json'),
   del = require('del'),
   gulp = require('gulp'),
   jsmerge = require('./jsmerge'),
   logger = require('@slomka/gulp-logger'),
   run = require('gulp-run'),
   runSequence = require('run-sequence');
   webpack = require('webpack');

var source = require('vinyl-source-stream');

var webAppFolder = './slomka.Gx.Web.App';
var bundles = [
   webAppFolder + '/JavaScript/Namespacing.js',
   webAppFolder + '/JavaScript/slomka.Utils.js',
   webAppFolder + '/JavaScript/slomka.Editor.js',
   webAppFolder + '/JavaScript/slomka.DocumentEditor.js'
];
var slomkaCoreJs = [
   'JavaScript/slomka.Config.js',
   'JavaScript/slomka.Error.js',
   'JavaScript/slomka.Polyfill.js',
   'JavaScript/slomka.Validator.js',
   'JavaScript/3rdParty/telerik.js',
   'JavaScript/3rdParty/Kendo.all.min.js',
   'JavaScript/FileLinks.js',
   'JavaScript/ColorPicker.js',
   'Javascript/ButtonUtils.js',
   'JavaScript/slomka.Kendo.js',
   'JavaScript/slomka.Resource.Review.js',
   'JavaScript/slomka.Resource.Section.js',
   'JavaScript/FeatureDecisions.js',
   'App_GxPages/MasterPages/header.ascx.js'
];

gulp.task('js:core:clean', function () {
   return del(webAppFolder + '/static/js/core.*');
});

gulp.task('js:core:thirdparty:clean', function () {
   return del(webAppFolder + '/static/js/thirdparty.min.*');
});

gulp.task('js:core:thirdparty', ['js:core:thirdparty:static'], function () {
   const wiredep = require('wiredep');

   return jsmerge(
      gulp, [
         gulp.src(wiredep({ bowerJson: bowerJson, directory: webAppFolder + '/bower_components' }).js),
         gulp.src([
            'node_modules/@gx/test-table-execution/dist/*.js',
            'node_modules/@gx/columnresize/dist/*.js',
            'node_modules/@gx/ddt/dist/*.js',
            'node_modules/@gx/jquery-contextmenu/dist/*.js',
            'node_modules/@gx/legacy-history-dialog/dist/*.js',
            'node_modules/@slomka/javascript-detect-element-resize/jquery.resize.js',
            'node_modules/@slomka/slomka-sticky-headers/dist/slomka-sticky-headers.js'
         ])
      ],
      'thirdparty.min.js',
      webAppFolder + '/static/js',
      true,
      logger('js:core:thirdparty')
   )();
});

gulp.task('js:core:thirdparty:static', ['js:core:thirdparty:static:clean'], function () {
   var copyitem = 'copy-item .\\node_modules\\@gx\\*\\dist\\static\\ .\\slomka.Gx.Web.App\\static\\thirdparty\\ -recurse -force';
   return run(copyitem, { usePowerShell: true }).exec();
});

gulp.task('js:core:thirdparty:static:clean', function () {
   return del(webAppFolder + '/static/thirdparty/**');
});

gulp.task('js:core', ['js:core:clean'], function () {


   if (!args.production)
      runSequence('js:lint');

   var thirdpartySource = gulp.src('thirdparty.min.js', { cwd: webAppFolder + '/static/js' });
   var coreSource = gulp.src(slomkaCoreJs, { cwd: webAppFolder });

   var bundledSource = browserify({
      entries: bundles
   })
      .transform('babelify',{ global: true })
      .transform('envify', {
         global: true,
         NODE_ENV: args.production ? 'production' : 'development'
      })
      .bundle()
      .pipe(source('bundled.js'));

   return jsmerge(
      gulp, [thirdpartySource, bundledSource, coreSource],
      'core.js',
      webAppFolder + '/static/js',
      false,
      logger('js:core')
   )();
});

gulp.task('js:core:watch', function () {
   gulp.watch(slomkaCoreJs, { cwd: webAppFolder }, ['js:core']);
});

现在我尝试删除browserify并添加webpack来执行此构建。但我有问题尝试将所有人捆绑在一起。使用webpack的目标不是捆绑本身，我正在迁移以在其他东西上使用把手模板。

在这种情况下，我有几个问题：

• 在我的webpack.config.js中我需要对每个JS文件进行硬编码吗？例如

  const path = require('path');
  const webpack = require('webpack');
  var webAppFolder = './slomka.Gx.Web.App';
  module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: {
      thirdparty: './../static/js/thirdparty.min.js',
      namespacing:  webAppFolder + '/JavaScript/Namespacing.js',
      utils: webAppFolder + '/JavaScript/slomka.Utils.js',
      .... etc for the rest..
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].bundle.js',
    },
  };
  

• 我是否需要为babelify配置管道，或者Webpack可以为我处理这个问题？我尝试为我的webpack配置添加此配置。

  module: {
      loaders: [
          {
              test: /\.js$/,
              loader: 'babel',
              exclude: /node_modules/,
              query: {
                  cacheDirectory: true,
                  presets: ['es2015', 'react']
              }
          }
      ]
  }
  

• 迁移到webpack后，我会有热门变化手表吗？