How to integrate a external js into the main.js file in Webpack vue.js?

Question

I want to integrate a downloaded javascript file from the source folder.

Consider that the css and js files exists in the path.

From what I gather to integrate a css in the main.js I just add

require('./vendor/bootstrap/css/bootstrap.min.css')

but how to add a js file ? When I add the js files the same way

require('./vendor/jquery/jquery.min.js')
require('./vendor/bootstrap/js/bootstrap.bundle.min.js')

I get an error message

./src/vendor/bootstrap/js/bootstrap.bundle.min.js
Module not found: Error: Can't resolve 'jquery' in '/home/<cool path>/ClientVueJs/src/vendor/bootstrap/js'
 @ ./src/vendor/bootstrap/js/bootstrap.bundle.min.js 14:125-142
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Answer 1

Add alias for jquery to webpack config(and remove your require line require('./vendor/jquery/jquery.min.js')), because bootstrap depends on 'jquery' module:

    module.exports = {
    //...
        resolve: {
            alias: {
                jquery: path.resolve(__dirname, 'src/vendor/jquery/jquery.min.js')
            }
        }
    };

This binding lets webpack resolve require('jquery') from bootstrap file.

If you need to map library to additional variables like $ you have to use ProvidePlugin, check @Arseniy-II's comment with link.