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

user_425823 0
Viewed 901

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

webpack-4 twitter-bootstrap webpack
1 Answers

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: [{
                test: /\.(sa|sc|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
    }
};
user_16685010
Related