attempts to package a multi-page (multi-html file) application through webpack , but when packaging css files through css-loader and style-loader , it is found that css imported by entry js cannot be packaged into the head tag section of html file (and try to extract css as a separate file through extract-text-webpack-plugin ).

webpack configuration file is as follows:

module: {
    rules: [
        //
        {
            test: /\.css$/,
            use:["style-loader","css-loader"]
        },
    ],
},

js entry (chunk) file is as follows ( src/pages/about/index.js ):

import "./css/index.css"
export default {
    
}

Source address: https://gitee.com/qingyun1029/webpack-for-multiple-page-demo

usage:

1. Clone the project to local
   git clone git@gitee.com:qingyun1029/webpack-for-multiple-page-demo.git
2. install dependent modules
   npm install
3. Packaging Code
   npm run build

after formatting the packaged html , you will find that there is no style tag and style content

within the head tag.

-

< H2 > add: < / H2 >

suddenly found a strange problem? html-webpack-plugin , css-loader , and style-loader are installed in my package.json, but only the first two appear in the console, but style-loader does not appear.