0

I'm a beginner with Webpack and simply stuck. I'm trying to bundle jQuery plugins and have them in a plugins-bundled.js file. Then I have my local scripts file where all jQuery code goes. These 2 files are loaded in HTML in order 1. plugins-bundled.js 2. scripts.js But then I got error in a console Uncaught ReferenceError: jQuery is not defined. Is there something I'm missing here?

Webpack config

const path = require('path'),
settings = require('./settings');

module.exports = {
  entry: {
    App: settings.themeLocation + "js/plugins.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "js"),
    filename: "plugins-bundled.js"
  },
  module: {
    rules: [
      {
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        },
        test: /\.js$/,
        exclude: /node_modules/
      }
    ]
  }
}

Webpack App file

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
import slick from 'slick-carousel';
import localScroll from 'jquery.localscroll';
import popper from 'popper.js';
import bootstrap from './bootstrap.min';

Local scripts file

(function($){    
  "use strict";    
  // code goes here...    
})(jQuery);
Alexander
  • 123
  • 1
  • 1
  • 9
  • 1
    Maybe this will help you https://stackoverflow.com/questions/49546793/cant-resolve-jquery-with-typescript/49547385 – Tan Duong Apr 26 '18 at 03:29
  • Why do you have a "local scripts file"? – Aluan Haddad Apr 26 '18 at 03:38
  • Tried it, now have 2 errors in console :) Cannot read property 'fn' of undefined and jQuery is not defined – Alexander Apr 26 '18 at 03:40
  • @AluanHaddad I want to keep plugins and scripts in separated files. – Alexander Apr 26 '18 at 03:43
  • @AluanHaddad All the JS logic will go in scripts.js, like functions etc. – Alexander Apr 26 '18 at 03:46
  • @Alexander why not use modules? What's the point of taking on the complexity costs of a modern toolchain and then writing global crap? – Aluan Haddad Apr 26 '18 at 03:47
  • @AluanHaddad all my code is written in functions, so it means I can't mix functional code with Webpack? I have to rewrite it in a modular way? Sorry for noob questions :) – Alexander Apr 26 '18 at 03:49
  • @Alexander modules and functions are orthogonal. I'm in no way telling you to use `class`es (gods forbid). I am talking about using `import $ from 'jquery';` `export function myFunctionThatUsesJquery(args) {...}`. Anyway, even classes are functions in JavaScript. – Aluan Haddad Apr 26 '18 at 03:51
  • @AluanHaddad but then it'll bundle it in one file. What if I want two separated files? – Alexander Apr 26 '18 at 04:00
  • @Alexander sorry I don't see what you mean. You can have as many modules as you want. Each module imports whatever it uses from other modules and exports elements that other modules can consume. You can structure your code in as many or as few files as you want. – Aluan Haddad Apr 26 '18 at 04:02

0 Answers0