Import JS partials with webpack and gulp

Question

I don't understand how the following line of code works:

var aScriptName = require('./modules/your-script');

I want to split out my JS by using the require statement above with webpack. What I don't understand, is that when I include this multiple times in the script file, my partials do not all consistently load.

My folder structure for my JS looks something like this:

-app
---js
-----script.js
-----modules
---------module1.js
---------module2.js
---------module3.js
---------module4.js

With this in mind, what I'm trying to do is call the modules like this in script.js:

var 1script = require('./modules/module1');
var 2script = require('./modules/module2');
var 3script = require('./modules/module3');
var 4script = require('./modules/module4');

A full copy of my webpack is below:

var debug = false;
var path = require('path');
var webpack = require('webpack');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  context: __dirname,
  // entry is already defined in gulpfile.js - leave this line commented out.
  // entry: "/app/js/script.js",
  devtool: debug ? "inline-sourcemap" : null,
  module: {
    rules: [{
      test: /\.js$/,
      use: 'babel-loader'
    }],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query  :{
          presets:['es2015']
        },
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    root: [path.resolve(__dirname, 'client'), path.resolve(__dirname, 'node_modules')],
    extensions: ['', '.js']
  },
  output: {
    path: __dirname + "public/javascripts",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    // new webpack.optimize.DedupePlugin(),
    // new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ minimize: true, mangle: true }),
    // new BundleAnalyzerPlugin()
  ],
};

My relevant Gulp script:

gulp.task('scripts', function() {
    gulp.src('client/js/script.js')
    .pipe(webpack(require('./webpack.config.js')))
        .pipe(uglify())
    .pipe(gulp.dest('public/javascripts'))
    .pipe(livereload());
});

What's happening is it's only loading the first 2 includes, then the rest don't render. Is the syntax not correct for including the partials in script.js?

This is my console output after running gulp scripts

[13:56:14] Starting 'scripts'... [13:56:14] Finished 'scripts' after
3.53 ms [13:56:17] Version: webpack 1.15.0
         Asset     Size  Chunks             Chunk Names scripts.min.js  90.4 kB       0  [emitted]  main

EDIT: Upon further inspection, it does indeed seem that scripts are being piped in correctly - but they don't run. plugging in console.log("test")s in the functions contained in the partials don't render - my console is empty.

Why would that be?

EDIT #2: The partials is mostly just jQuery code, so they all look something like this:

var $ = require('jquery')

$(function() {
  console.log("test 3")
  // jquery code here
});

I made 3 test files with just console logs, and all 3 appeared.

Is it because something is conflicting in my functions? Because when it's all my normal code, none of it runs, with no errors in console.

Answer 1

I changed:

var aScriptName = require('./modules/your-script');

To:

import {aScriptName} from './modules/your-script'

And everything is working as expected.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import