Webpack不自动加CSS前缀，需通过postcss-loader接入autoprefixer；BEM命名须人工约束，不可依赖Webpack自动添加。
Webpack本身不处理BEM命名，也**不自动加CSS前缀**；所谓“BEM自动前缀”是常见误解——你真正需要的是两件事：在开发期**强制约束类名生成规则**（BEM结构），在构建期**自动补全浏览器兼容性前缀**（autoprefixer）。这两者必须分开配置，混在一起反而会失效。
webpack中启用autoprefixer补全CSS厂商前缀
autoprefixer不是Webpack原生功能，它通过postcss-loader接入，且依赖postcss和autoprefixer两个包。关键点在于：它只作用于你写的CSS规则本身（比如display: flex），跟BEM命名完全无关。
- 先安装依赖：
npm install --save-dev postcss postcss-loader autoprefixer - 在项目根目录添加
postcss.config.js，内容为：module.exports = { plugins: [ require('autoprefixer')({ overrideBrowserslist: ['> 1%', 'last 2 versions', 'not dead'] }) ] } - 修改
webpack.config.js中的css-loader后追加postcss-loader：{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } - 注意：如果用了
css-loader的modules模式，autoprefixer仍生效——它处理的是CSS语法层，不关心类名是否被哈希化
BEM类名不能靠Webpack“自动加”，得靠约定+工具链保障
Webpack不会、也不该替你把.button改成.myapp-button。BEM的“命名空间前置”必须由开发者主动控制，否则所有隔离努力都会白费。常见错误是寄希望于loader自动重写类名，结果导致HTML与CSS类名不匹配、React组件className丢失、调试时找不到对应样式。
- 第三方库（如
react-datepicker）若支持classNamePrefix，优先用它：<DatePicker classNamePrefix="myapp-date-picker" /> - 不支持prefix的库（如老版
ant-design），改用CSS属性选择器软拦截：.myapp-ui [class^="ant-"] { ... }，但必须配合/* webpackMode: "global" */注释禁用CSS Modules作用域 - Vue单文件组件中，
<style scoped>会破坏属性选择器匹配，必须改用<style module>或显式写:global(.ant-btn) - 别在JSX里手动拼接BEM类名（如
className={`card__header ${isExpanded ? 'card__header--expanded' : ''}`），改用classnames或统一定义BLOCK = 'myapp-card'再派生
为什么BEM + autoprefixer一起用时容易出问题
最典型的问题是：你写了.myapp-button { display: flex; }，期望autoprefixer补全所有flex前缀，结果发现Chrome里正常，IE11里没效果——这不是autoprefixer失效，而是你的CSS根本没进构建流程。
立即学习“前端免费学习笔记（深入）”；
- 如果你用的是
css-loader?modules，而文件名不是*.module.css，那这个CSS会被当成全局样式加载，但可能被其他规则覆盖或未正确注入 - 如果BEM类名是JS动态生成（比如用
clsx拼出myapp-button--primary），但CSS里只写了.myapp-button，那Modifier样式压根不会生效 - Webpack的
mini-css-extract-plugin在生产环境抽离CSS时，若publicPath配置错误，会导致CSS文件404，autoprefixer补的前缀自然也看不到 - 某些UI库（如
emotion）会在document.head直接插入全局CSS，这部分样式完全绕过Webpack的postcss流程，autoprefixer对其无效
真正要盯住的不是“怎么让Webpack自动加BEM前缀”，而是：HTML里出现的每个类名，是否在CSS源码中有且仅有一处对应定义；每条CSS规则，是否经过了postcss-loader且未被其他loader提前截断。这两点漏掉任何一环，BEM和autoprefixer都会变成幻觉。
