Question: I'm building a small web app with Webpack-enabled CSS modules (via css-loader) and *without* React. My goal is to get the [benefits of short, obfuscated CSS class names](https://medium.freecodecamp.org/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b) (as I'm currently using lengthy BEM class names) in my HTML by using the `localIdentName: '[hash:base64:8]'` option on css-loader. Since I'm not using React, I'm working with raw HTML that is *not* being programmatically generated through JSX file or `document.write`.

I've used css-loader with React plenty before, and it ultimately works because you're able to import the style class names in the React file and refer to them using the human-readable names, regardless of whatever the class name gets changed to by Webpack.

However, I'm confused how to deal with this **when using raw HTML**; I can't just import the styles in since it's not a JS file. If I have a class called `photo__caption--large` referenced in my HTML, and webpack converts the class name to `d87sj`, the CSS file will say `d87sj` but the HTML will still say `photo__caption--large`.

Is there some kind of loader for HTML files that's able to edit class names in the file to their Webpackified equivalents? Or should I really just be using React with CSS modules?

Answer: 
This github code might help you.
<https://github.com/moorthy-g/css-module-for-raw-html>

A bit of complicated setup needed. We need to wire the following packages together.  

- postcss-loader  

- postcss-modules  

- posthtml-css-modules  

- posthtml-loader 

The following postcss configuration creates modules dump file (./tmp/module-data.json). 

```
// postcss.config.js
module.exports = {
    plugins: {
    'postcss-modules': {
      getJSON: function(cssFileName, json) {
        const path = require('path'), fs = require('fs');
        const moduleFile = path.resolve('./tmp/module-data.json');
        const cssName = path.basename(cssFileName, '.css');
        const moduleData = fs.existsSync(moduleFile) ? require(moduleFile) : {};
        moduleData[cssName] = json;
        fs.existsSync('./tmp') || fs.mkdirSync('./tmp');
        fs.writeFileSync(moduleFile, JSON.stringify(moduleData));
      },
      generateScopedName: '[local]_[hash:base64:5]'
    }
  }
}

```

And the following webpack rule links html file to modules dump file.

```
{
  test: /\.html$/,
  use: [
    { loader: 'html-loader' },
    {
      loader: 'posthtml-loader',
      options: {
        plugins: [
          require('posthtml-css-modules')('./tmp/module-data.json')
        ]
      }
    }
  ]
}

```

Finally, HTML uses `css-module` attribute instead of `class`

```
<div css-module="main.container">
  <h2 css-module="main.title">Title for the page</h2>
</div>

```

Let me know if you have any issues
My understanding of Webpack, CSS Modules, & CSS-Loader is that the **entire point** is to use javascript to generate the files. 

This enables all the name translation and what not. What's your goal with Webpack if you're writing static HTML?

There are several [static site generators](https://www.npmjs.com/package/static-site-generator-webpack-plugin) for Webpack that will allow you to get the result you want, BUT they're still building the HTML files.

Alternately you could look at tools similar to React (Vue or Angular) that allow you to write all your "templates" in straight HTML. In Vue for example, you can write only HTML (to be compiled from javascript) without needing to use any of its data binding or routing.