How to use webpack modules on inline javascript

Question

I'm an inexperienced web dev, and especially so when it comes to JavaScript. Lately I've been trying to fix that, and since Laravel's my framework of choice I'm trying to change from the "old" style of:

<script src="script1.js"></script>
<script src="script2.js"></script>
…

to something better. And using Laravel, the logical step is using Mix, which relies on Webpack.

After a lot of trial and error, I've managed to get the basic setup working. I have a settings.js file for changing the modules' default settings when necessary, and an app.js file for custom functions I'd like to make available on every page. I'm also separating the vendor modules to a vendors.js file.

So the bootstrap.js file has:

window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
[...]
require('bootstrap-datepicker');
require('bootstrap-year-calendar');

The webpack.mix.js file has:

mix.autoload({ jquery: ['$', 'jQuery', 'window.jQuery']});
mix.webpackConfig({ resolve: { alias: { jquery: "jquery/src/jquery" }}});
mix.js([
    'resources/js/app.js',
    'resources/js/settings.js'
], 'public/js')
    .extract([
        'lodash',
        'jquery',
        […]
        'bootstrap-datepicker',
        'bootstrap-year-calendar'
    ]);

And the master layout has the following scripts right before `:

<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/app.js') }}"></script>

This setup seems to be working, but there's one last issue I just can't seem to figure out. I also add some javascript on specific pages, for functionality limited to those pages (initialising pickers with non-default settings, custom form behaviour, etc). So some pages have an extra <script type="text/javascript"> [custom code] </script> section before </body> .

However, code there doesn't have access to modules: $('.input-daterange').datepicker(); should initialise an input as a bootstrap-datepicker instance, but it doesn't. Of course, using the "old style" it worked. Now, I'm getting a TypeError: undefined is not a function (near '...$('.input-daterange').datepicker...') error.

So my issue is the following: how can I import the necessary modules to be used in the script embedded in the HTML file?

PS : when I was pretty much finished writing this question, I happened to stumble on the solution. I decided to post it nevertheless because a) it might help someone else, and b) if there's a better way to approach this, I'd love to hear about it.

Answer 1

Doing the import not on the embedded javascript, but on either my app.js or settings.js files, made it work:

import 'bootstrap-datepicker';
import 'bootstrap-year-calendar';

However, making the imports on settings.js rather than app.js seems to cause some issues, as it broke some separate functionality. I'm not sure if it's because app.js is listed first in the webpack.mix.js file (as shown below), but nevertheless the file where you make the imports does matter.

mix.js([
    'resources/js/app.js',
    'resources/js/settings.js'
], 'public/js')