Why import bootstrap css with webpack instead of just linking to it?

I have been learning webpack for use in a Single Page App.

One of the examples is using:

import 'bootstrap/dist/css/bootstrap.min.css';


along with a loader like this:


test: /.css$/,
use: ['style-loader', 'css-loader']



This works to inject bootstrap css into main.js and it then gets injected into the dom at runtime.

Ok fine. But why? I don't see a benefit to this over just have a normal link.

The other side of the code is that this is now increasing the size of the bundle (my app bundle is already over 5 megs) is just going to increase the startup time vs using a CDN.

Am I missing anything?

Update

I think I found the answer to this: The next step is to extract the imported css to a css file with MiniCssExtractPlugin like explained here

1 Answer
1

It will not make any difference when you have one dependency. But if you have a bunch of third party libraries , you can bundle and minify in to one. It will give you advantage when your application gone in to production.

And also other benefits would be converting .scss in to css

Sample web pack configuration

module.exports =
mode: 'development',
entry:
'main.app.bundle': ['main.ts', "./somestyle.css"]
,
optimization:
splitChunks:

cacheGroups:
commons:
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all'



,
output:
publicPath: '/dist/',
filename: '[id].js',
chunkFilename: "[name].js",
path: path.resolve(__dirname, 'dist'),

,
module:
rules: [c)ss$/,
use: [
'exports-loader?module.exports.toString()',

loader: MiniCssExtractPlugin.loader,
,
'css-loader',
'sass-loader',
]
,


// This plugin will allow us to use html templates when we get to the angularJS app
test: /.html$/,
exclude: /node_modules/,
loader: 'html-loader',
,

test: /.tsx?$/,
loader: 'ts-loader',

]
,
node:
fs: 'empty'
,
resolve:
modules: [
__dirname,
'node_modules',
],
extensions: [".ts", ".tsx", ".js"]
,
plugins: [
new CleanWebpackPlugin(['dist']),
new HashOutput(
validateOutput: false,
),
new MiniCssExtractPlugin(
filename: 'application.bundle.css',
chunkFilename: '[name].css'
)
],
devtool: 'source-map',
externals: ,
devServer:
historyApiFallback: true

;


Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.