Skip to content

Instantly share code, notes, and snippets.

@mahendrapaipuri
Created August 18, 2023 08:30
Show Gist options
  • Select an option

  • Save mahendrapaipuri/961ea5cd8db28fdaf484e9dca4a06bf3 to your computer and use it in GitHub Desktop.

Select an option

Save mahendrapaipuri/961ea5cd8db28fdaf484e9dca4a06bf3 to your computer and use it in GitHub Desktop.
Adding bootstrap 3 to react app with webpack
import 'jquery/src/jquery';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
const webpack = require('webpack');
const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: path.resolve(__dirname, 'src', 'index.tsx'),
mode: 'production',
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)/,
exclude: /node_modules/,
use: 'ts-loader'
},
{
test: /\.(sa|sc|c)ss$/i,
include: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'style'), /node_modules\/bootstrap/],
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpe?g|gif|svg|woff2?|ttf|eot)$/i,
include: [path.resolve(__dirname, 'src'), /node_modules\/bootstrap/],
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'assets'
},
}
]
},
output: {
publicPath: '/',
filename: 'rjsf-spawner-form.js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.css', '.scss', '.js', '.jsx', '.ts', '.tsx']
},
plugins: [new webpack.HotModuleReplacementPlugin(), new BundleAnalyzerPlugin()],
devServer: {
static: [{directory: path.resolve(__dirname, 'dist')}, {directory: path.resolve(__dirname, 'public')}],
port: 8080,
hot: true
},
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment