前言

千辛万苦从webpack2.5.1升级到4.44.2，终于编译成功，可是样式都没了，对比之前的项目，发现html中的中的上类名没有变成hash值，而下面中的类名已经打包成hash值，所以样式类名没有对应上导致样式不显示

排查原因

开启css-modules之后，类名才会打包成hash值，所以是css-modules配置问题
（小插曲：由于是style-loader给html加上，一开始以为是style-loader的配置问题，尝试修改属性并没有效果，试着修改了css-loader的配置，发现有变化，原来是css-loader的配置，现在想想，只能是css modules的问题）

解决

项目中涉及到配置css modules的有两处，并且两处打包的类名要对应上，即css-loader中的 localIdentName 要和babel中的 generateScopedName 对应上，如下：

1、一处webpack样式配置中css-loader的配置，这里是给style标签上的类名进行打包

{
    loader: 'css-loader',
    options: {
        import: true,
        modules: {
            localIdentName: '[path]__[name]__[local]', 
        },
        sourceMap: true,
        importLoaders: 2,
    },
},

2、另一处是babel的配置，项目之前用的是react-css-modules，这个依赖包要删掉，此次升级之后用的是babel-plugin-react-css-modules，此处是配置body中div标签上的类名

[
    'react-css-modules',
    {
        "generateScopedName": "[path]__[name]__[local]",
        "webpackHotModuleReloading": true,
        "filetypes": {
            ".less": {
                "syntax": "postcss-less"
            }
        },
    }
]

遗留问题

1、如上所示，并没有将类名打包成hash值，因为如果用 [hash:base64:5]，两处打包会是不一样的值，原因不明 2、安装的是webpack4，但是配置css-loader时发现用文档中webpack4对应的css-loader的配置会报错，说没有这个属性，反而用webpack5版本可以，？我想不通

webpack配置——CSS Module

前言

排查原因

解决

遗留问题