How does bundle.js inject style content into index.html?

Question

I'm reading a Single Page Application(React) book which describes the use of bundler as:

App.js

import React from 'react';
import './App.css';

export default function App() {
   ...
}

When you use the import keyword to declare a dependency on static content, the decision about how to handle the content is left to the development tools i.e webpack. For small files, the content will be included in the bundle.js file, along with the JavaScript code required to add the content to the HTML document. This is what happens with the App.css file that was imported

so I add a style in App.css to check:

App.css

testClass {
   background-color: red 
}

I can see that index.html does have a style element that contain the content of App.css. I copied the bundle.js file to my code editor and tried searching testClass keyword in bundle.js, there was nothing. so what does it mean by "the content will be included in the bundle.js file"? I mean if it is there, I should be able to see some javascript code to manipulate DOM API as:

var styleNode = document.createElement('style');
styleNode.styleSheet.cssText = 'testClass { background-color: red }';
document.getElementsByTagName('head')[0].appendChild(styleNode);

The code is simplified by me, but you get the idea, which is that I should at least can locate testClass keyword in bundle.js if the content will be included in the bundle.js file? so how does bundle.js inject style content into index.html?

user_1716634 · Answer

Im assuming that you are using create-react-app (which by default uses webpack for asset management)

If that's the case...

The style tag is not injected from client, but from the server, when you run npm run build
Webpack uses plugin system to generate assets. One of them being HtmlWebpackPlugin

As per the documentation.

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles.

The plugin will generate an HTML5 file for you that includes all your webpack bundles in the body using script tags. Just add the plugin to your webpack config as follows:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

This will generate a file dist/index.html containing the following:



  
    
    webpack App

If you have multiple webpack entry points, they will all be included with tags in the generated HTML.

If you have any CSS assets in webpack's output (for example, CSS extracted with the MiniCssExtractPlugin) then these will be included with tags in the element of generated HTML.

create-react-app by default uses MiniCssExtractPlugin (For production build). So inserting the to html is handled by HtmlWebpackPlugin

Input to the template



  
    React App

Output from HtmlWebpack plugin

React App

How does bundle.js inject style content into index.html?

1 Answers