src/index.html
src/layout/header.html
src/css/common/iconfont.css

head.html:
<link rel="stylesheet" href="@styles/common/iconfont.css">
index.html:
<%~ include('layout/header.html',{title:title}) %>
webpack config:

module.exports = (env, argv) =>{
  const isProd = argv.mode === 'production';

  return {
    mode: argv.mode,
    devtool: isProd?'hidden-source-map':'eval-cheap-module-source-map',   
    output: {
      path: path.resolve(__dirname, 'dist'),
      clean: true,
    },
    resolve: {
      alias: {
        '@scripts': path.join(__dirname, 'src/js/'),
        '@styles': path.join(__dirname, 'src/css/'),,
        '@fonts': path.join(__dirname, 'src/fonts/'),
      },
    },
    plugins:[
      new HtmlBundlerPlugin({
        entry: {
          index: {
            import: path.join(__dirname, 'src/index.html'),
            data: { title: 'index' },
          },
          contact:{
            import: path.join(__dirname, 'src/page-contact.html'),
            data: { title: 'contact' },
          }
        },
        preprocessor: 'eta',
        preprocessorOptions: {
          views: path.join(__dirname, 'src'),
        },
            js: {
              filename: 'js/[name].[contenthash:8].js',
              inline: {
                chunk: [/runtime.+[.]js/],
              },
            },
            css: {
              filename: 'css/[name].[contenthash:8].css',
            },
            minify: {
              removeComments: true,
              collapseWhitespace: false, 
              minifyJS: true, 
              minifyCSS: true,
            },
          }),
    ],
    module:{
      rules: [
          {
            test: /\.(ico|png|jp?g|svg)$/,
            type: 'asset',
            parser:{
              dataUrlCondition:{ maxSize: 10*1024 }
            },
            generator:{
                filename: 'images/[name].[hash:8][ext]',
            },
          },
          { 
            test: /\.css$/i, 
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  postcssOptions: {
                    plugins: [['postcss-preset-env']],
                  },
                },
              }
            ],
          }
      ]
    },
    devServer: {
      static: path.join(__dirname, 'dist'), 
      watchFiles: {
        paths: [ path.join(__dirname, 'src/**/*.*') ],
        options: {
          usePolling: false,
        },
      },
    },
    optimization: {
      splitChunks: {
        minSize: 30,              
        cacheGroups: {           
            default: {  
                name: 'commons',  
                chunks: 'all',  
                minChunks: 2,   
                priority: -20, 
            },
            vendors: {                            
              test: /[\\/]node_modules[\\/]/,   
              name: 'vendor',                   
              chunks: 'all',
              priority: -10                    
            }
        },
      },
    },
  };
}

error:

PluginException:
HTML Bundler Plugin Can't resolve D:\webpack\src\css\common\iconfont.css in the file src\page-contact.html
The handling of @import at-rules in CSS is not supported. Disable the 'import' option in 'css-loader':
{
  test: /\.css$/i,
    use: [
      {
        loader: 'css-loader',
        options: {
        import: false, // disable @import at-rules handling
      },
    },
  ],
},

When I run dev, an error occurs. How can I modify and solve it? It seems that there is an error in the alias reference to the css when packaging.

Only index.html runs normally, but when page-contact.html (including header.html and footer.html) is added and run, an error is reported.

The problem is in the splitChunks configuration. Webpack compile all assets in JavaScript modules and split it, including CSS modules defined in HTML. Therefore CSS files are lost.

Solution

Add the test option to every splitChunks.cacheGroups to avoid splitting of CSS files:

  optimization: {
    splitChunks: {
      minSize: 100,
      cacheGroups: {
        default: {
          test: /.+\.(js|ts)$/, // <= split only scripts, excluding style files
          name: 'commons',
          chunks: 'all',
          minChunks: 2,
          priority: -20,
        },
        vendors: {
          test: /[\\/]node_modules[\\/].+\.(js|ts)$/, // <= split only scripts, excluding style files
          name: 'vendor',
          chunks: 'all',
          priority: -10,
        },
      },
    },
  },