title: Switching from Gulp to Webpack
body: <p><strong>UPDATE 30.04.20</strong></p>
  
  <p>[ <a href="https://stackoverflow.com/questions/44811367/move-from-webpack-1-to-webpack-2-3?noredirect=1&amp;lq=1">Moving to Webpack</a> ]</p>
  
  <p>My first question is about how recommended is this switch for simple projects, just to Pre-Process/Concat/Minify?</p>
  
  <p>Understanding this future "standards", like Webpack in together with PostCss-NextCss-Autoprefixer, etc. is like obsessing me....</p>
  
  <p>So this leads to my next question , is there any tutorial that will guide to simple tasks like the one I told in my first question?</p>
  
  <p>Or is an easy way to change my <code>gulpfile.js</code> to a <code>webpack-config.js</code></p>
  
  <p>My normal tasks in gulp are not the best practices but work well :</p>
  
  <pre><code>//load plugins
  var gulp    = require('gulp'),
  runSequence = require('run-sequence'),
  sass        = require('gulp-ruby-sass'),
  compass     = require('gulp-compass'),
  rev         = require('gulp-rev'),
  revDel      = require('rev-del'),
  del         = require('del'),
  minifycss   = require('gulp-minify-css'),
  uglify      = require('gulp-uglify'),
  rename      = require('gulp-rename'),
  concat      = require('gulp-concat'),
  notify      = require('gulp-notify'),
  plumber     = require('gulp-plumber'),
  watch       = require('gulp-watch'),
  path        = require('path');
  
  
    //the title and icon that will be used for the Grunt notifications
    var notifyInfo = {
      title: 'Gulp',
      icon: path.join(__dirname, 'gulp.png')
    };
  
    //error notification settings for plumber
    var plumberErrorHandler = { errorHandler: notify.onError({
      title: notifyInfo.title,
      icon: notifyInfo.icon,
      message: "Error: &lt;%= error.message %&gt;"
    })
  };
  
  //patches
  var paths = {
    scriptsAbs : '_coffeescript/',
    stylesAbs: '_scss/',
    scriptsCom : '_coffeescript/' + '**/*.js',
    stylesCom :'_scss/' + '**/*.scss',
    cssCom : 'resources/css',
    jsCom : 'resources/js',
    imgCom : 'resources/img'
  };
  
  gulp.task('clean',
    function (cb) {
      del([
        paths.cssCom + '/*',
        paths.jsCom + '/*'
        ], cb);
    });
  
  //styles
  gulp.task('styles',
    function() {
      return gulp.src(paths.stylesCom)
      .pipe(plumber(plumberErrorHandler))
      .pipe(compass({
        sass: '_scss',
        css: paths.cssCom,
        image: paths.imgCom,
        style: 'expanded',
        relative: true,
        require: ['normalize-scss', 'susy']
      }))
      .pipe(gulp.dest(paths.cssCom))
      .pipe(rename({ suffix: '.min' }))
      .pipe(minifycss())
      .pipe(gulp.dest(paths.cssCom))
      .pipe(rev())
      .pipe(gulp.dest(paths.cssCom))
      .pipe(rev.manifest())
      .pipe(revDel({ dest: paths.cssCom }))
      .pipe(gulp.dest(paths.cssCom))
      .pipe(notify({ message: 'Styles task completed' }))
    });
  
  //scripts
  gulp.task('scripts',
    function() {
      return gulp.src(paths.scriptsCom)
      .pipe(plumber(plumberErrorHandler))
      .pipe(concat('main.js'))
      .pipe(gulp.dest(paths.jsCom))
      .pipe(rename({ suffix: '.min' }))
      .pipe(uglify())
      .pipe(gulp.dest(paths.jsCom))
      .pipe(rev())
      .pipe(gulp.dest(paths.jsCom))
      .pipe(rev.manifest())
      .pipe(revDel({ dest: paths.jsCom }))
      .pipe(gulp.dest(paths.jsCom))
      .pipe(notify({ message: 'Scripts Concatenated completed' }))
    // .pipe(reload({stream:true}));
  
  });
  
  
  gulp.task('default', ['clean','styles','scripts'], function(){
    gulp.watch(paths.stylesCom, ['styles'])
    gulp.watch(paths.scriptsCom, ['scripts'])
  
  //watch .php files
  // gulp.watch(['*.php'], ['bs-reload'])
  });
  </code></pre>
  
  <p>And  I'm starting to use postcss that is making my workflow, mm, better..easier sometimes.</p>
  
  <p>What are your opinions on all this? Where is the right path to start?</p>
  
  <p><strong>EDIT // JUNE 28, 2017</strong></p>
  
  <p>At this date our progress with Webpack 1  were super satisfactory and successfully , our workflow is pretty much faster and our dependence in this tool is Unchangeable.</p>
  
  <p>This is the <code>webpack.config.js</code> that we use every day:</p>
  
  <pre><code>"use strict";
  
  var webpack = require('webpack');
  var glob = require('glob-all');
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
  
  let start = {
  
      entry: {
          scripts: glob.sync(
              [
              './_javascript/*.js',
              './_cssnext/*.pcss'
              ]
          )},
  
      output: {
          path: './resources/js',
          filename: 'bundle--[name].js'
      },
      watchOptions: {
          poll: true
      },
  
      postcss: function (webpack) {
          return [
              require("postcss-import")({addDependencyTo: webpack}),
              require("postcss-url")(),
              require("precss")(),
              require("postcss-cssnext")(),
              require('postcss-font-magician')(),
              require("postcss-reporter")(),
              require("postcss-browser-reporter")(),
              require('postcss-inline-svg')(),
              require('postcss-urlrev')(),
              require('postcss-fontpath')(),
              require('postcss-object-fit-images')()
          ]
      },
  
      module: {
          loaders: [
              {
                  test: /\.jsx?$/,
                  loader: 'babel-loader'
              },
              {
                  test: /\.p?css$/,
                  loader: ExtractTextPlugin.extract(
                      'style-loader',
                      'css-loader!postcss-loader'
                  )
              }
          ]
      },
  
  
      plugins: [
          new webpack.optimize.CommonsChunkPlugin({name: 'scripts', filename: 'bundle--[name].js'}),
          new webpack.optimize.UglifyJsPlugin({
              compress: {
                  warnings: false
              }
          }),
          new ExtractTextPlugin("../css/bundle--styles.css"),
          new BrowserSyncPlugin({
              host: 'localhost',
              port: 3000,
              proxy: 'localhost:8002',
              browser: 'google chrome',
              ghostMode: false
          })
      ]
  
  };
  
  module.exports = start;
  </code></pre>
  
  <p>But times has change and is time to evolve to Webpack 3 , and now we are in the progress to change this <code>webpack.config.js</code>to the version 3 </p>