Problem with using webpack as a build tool and simple configuration problems

[SungKrumsiek]

Previously, I was using Webpack as the build tool. And started working with Grunt due to some issues. It was a simple transition with nothing to worry about. After 1 month of work, I started facing this issue:

I am using multiple views in the form of backbone. In order to save the information and collect (for the future use), I am using the factory function. Previously I was working with Grunt, this was working well but after the conversion, the subviews change event is not executing, I am definite about the firing in the Grunt (checked on my other workstation). I am creating these views inside a big (or general/parent) using a simple iteration of for loop.

for (var index=0;  index<this.dayIds.length;  index++) {
  this.timeSelectorDayViews[index] = new timeSelectorDay({
    el: '#timePickersWrapper',
    data: {
      time: this.model.get(this.dayIds[ index]),
      date: moment(this.model.get('weekStartDate')).add( index, 'd')
    }
  }).render();
}

This is also a fact that I am not using a classic way to generate the event but trying to create it using concatenate method and making a simple change to the event holder array. The only reason I am doing this. I have to get the unique id from those available HTML tags in the code.

Previously, I was supposing issues with webpack. And supposing the event were not correctly attached. But using those with delegateevent method does improve the solution. This means, there are multiple changes required to use the code with webpack. The next point, I was thinking about view scope rather than holding detachment responsible. So, I tested the view separately, but no improvement. On changing this to click event, the whole code is performing well without any issues. And it is using this function to do the firing.

var myDate = 'click' + ' .input-' + this.options.data.formattedDate;

I am using webpack driver gulp. In order to create the instance, I am passing the following to the configuration.

{
  entry: './src/app/client-app/index.js',
  output: {
    path: path.join(__dirname, 'dist/app/js'),
    filename: 'app.bundle.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      '_': 'lodash'
    })
  ],
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
    ]
  }
}

I am also facing another javascript problem. I am part of a team, who is responsible for maintaining and updating an NGO website. I am assigned to do some restructuring of information pages. This is a tough job for me, as I can't figure out how to do this. Right now, those pages contain information using simple layout with a single orientation. This lead to fast load and response time but not a responsive design. Everything view is part of a big parent layout. Inside the layout, I am having multiple view elements. And as a result, the vertical length of the page is increased by 4 times and the user has to scroll down the whole page to know about the information. http://militarybases.co/r/vmet-military-experience-job/ is one of those pages. You can see, at the top is the menu, followed by the map, after that there is parent div, which contains, image, wp-article, ads, ratings and comments with blank space, which does not have any useful purpose ( a clear non-responsiveness issue). So, I have to use javascript, convert this page into a simple example of drag and drop. So, if the website admin decides to make some changes, he just has to drop elements/view on the page.