What is the best way to include bootstrap using webpack?

I am currently building a webapp using Typescript and webpack. I have been able to successfully import some modules by including them in my webpack.config.js file as shown below. However, no matter how many times I attempt it, I cannot seem to import the bootstrap module into my app.

What should I do?

Here is a snippet from my webpack.config.js:

plugins: [
    new webpack.ResolverPlugin(
        new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('.bower.json', ['main'])
    ),
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
        _: 'lodash',
        Vue: 'vue'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
],
module: {
    loaders: [
        { test: /\.ts$/, loader: 'ts-loader' }
    ]
}

Answer №1

At long last, the solution has revealed itself to me.

The key is to integrate BowerWebpackplugin in place of

webpack.ResolverPlugin.DirectoryDescriptionFilePlugin

plugins: [
    new BowerWebpackPlugin({
        modulesDirectories: ['bower_components'],
        manifestFiles: ['bower.json', 'package.json'],
        includes: [/.*\.js/],
        excludes: [/.*\.less/],
        searchResolveModulesDirectories: true
    }),
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
        _: 'lodash',
        Vue: 'vue'
    }),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
],
module: {
    loaders: [
        { test: /\.ts$/, loader: 'ts-loader' }
    ]
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using Typescript to set the image source from a pipe

I've been working on creating a custom pipe similar to the code below: @Pipe({ name: 'imagePipe' }) @Injectable() export class ImagePipe { constructor(public someService: SomeService, public storage: Storage) { } transform(value: ...

Using Array.push within a promise chain can produce unexpected results

I have developed a method that is supposed to retrieve a list of devices connected to the network that the client has access to. export const connectedDevicesCore = (vpnId: string, vpnAuthToken: string) => Service.listVPNConnectionsCore ...

Using Typescript to assign a custom object to any object is a powerful feature

I am attempting to organize table data by utilizing the code found at https://github.com/chuvikovd/multi-column-sort. However, I am unsure of how to pass a custom object to the SortArray[T] object. The structure of my custom object is as follows: const ob ...

Utilize the power of Nuxt and Vue 3 to create sortable columns in a table, with the ability to only change the icons on the sorted column

I am facing a challenge with my sortable table icons. Whenever I click on an icon to sort a column, all the other icons also change direction. I understand that this is happening because I am toggling the visibility of icons based on the currentSortDir sta ...

A controller in Angular.js that leverages several different services

I'm having trouble injecting multiple services into a controller. Here are my listed files: index.html file: <script src="'./angular/angular.min.js'></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta ...

Revamp your AngularJS controller for a fresh new look

How can a controller be refreshed in Angular? Take into account the scenario below: <div ng-controller="MsgCtrl" ng-repeat="m in messages">{{m}}<br></div> <script> var ws = new WebSocket(something, something); function MsgCtrl($sco ...

What is the best way to transmit a collection of JSON documents from the server?

Need help with vue.js code. It's not working as intended, any suggestions? Below is the code snippet: mounted(){ fetch('/', { method: 'POST', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, *cors, ...

Explanation of JavaScript code snippet

fnTest = /abc/.test(function () { abc; }) ? /\bchild\b/ : /.*/; I am struggling to comprehend the functionality of this particular javascript snippet. Would someone be able to elaborate on the logic behind this code fragment? ...

Transforming the code from numerous div elements to utilizing Ajax for efficient execution

One of the key functionalities is that the content within the <div> changes based on the option selected in the <select> element. I am looking to incorporate ajax instead of multiple <div> elements. However, my proficiency with ajax is l ...

You do not have the authorization to access this content

I have been working on a Laravel web application to upload images into a data table and allow users to download the uploaded image on click. Initially, everything was working fine until I made changes in the code from return '{!! Html::link('ima ...

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...

Show only the lower left quadrant within the img tag during the prepend operation

I'm attempting to add an <img> tag in front of a <div> similar to this example on JSFiddle. However, I have a specific requirement to only display the bottom left quarter of the image instead of the entire one. HTML Markup <div id="my ...

What is the best way to enhance an object using a class in ES6?

In an effort to improve the clarity of my ES6 class definition, my current code looks like this: class SomeClass { constructor({a, b, c, d, e}) { this.a = a; this.b = b; this.c = c; this.d = d; this.e = e; // additional code here ...

What causes TypeScript to automatically infer a default property when dynamically importing a JavaScript file that lacks a default export?

While dynamically importing a javascript file that exports multiple functions (without a default export), I encountered this issue: const sayHi = import('./sayHi.js') I was expecting the type of sayHi to be Promise<{name1: function, name2: fu ...

The intersection type of an array gets lost when used in the map() function

Running into an issue with my TypeScript code snippet where the mapped type is losing intersection type information inside the map(). type Foo = { foo: number }; type Bar = { bar: string }; const arr: Foo[] & Bar[] = [{ foo: 1, bar: 'bar' }] ...

What methods can be employed to stop tests from being included in rollup bundles?

I am currently in the process of creating a react component package and I would like to know how to prevent my tests folder from being included in the dist file that is generated by rollup. After running rollup -c, my directory structure looks like this: ...

Prevent duplicate API calls in React with TypeScript

Upon page load, it is important to extract the value from the URL and send it to the API. However, due to changes in the state of parent objects, the API call is triggered three times when it should ideally only be called once. import React, {useContext ...

TypeScript - the object may potentially be 'null'

Despite receiving an error message, the program is running perfectly. https://i.sstatic.net/4NQyR.jpg var video = document.querySelector('#camera-stream'), if(!navigator.getMedia){ displayErrorMessage("Your browser doesn't have su ...

Preventing the mysql server called by php from running when the website is refreshed

My local website runs by querying a mysql database using inputs from an html form. The form values are passed to php via jQuery to execute the query. Is there a way to send a command to the mysql server to terminate the query if the web page is refreshed? ...

Issue with 'else if' statement in React Typescript: Unneeded 'else' block following 'return' statement

I am encountering an issue with the else if statement below. Even after removing the last pure Else statement, I am still getting an error on ElseIf from Lint. How can I fix this problem? Error message: Unnecessary 'else' after 'return&apo ...