笔记：Webpack 输出 UMD，配合 extract-text 一起的输出错误

前言

一些前提

• 标题里的 extract-text-plugin 实际上是 extract-text-webpack-plugin，标题太长了想缩短一些；
• 想描述的 extract-text-webpack-plugin 意外搞乱内容，debug 后感觉是一个特别场景里导致的问题，并不是很普遍，或者单纯就是我没搞对配置 🤦🏻‍♂️，笔记里面会描述。

最近做了一批 webpack 导出到 UMD 格式的项目，不管是自己的测试还是公司里的项目；首先 webpack 做导出并不是什么稀奇事，webpack 里面用 multiple entry 分别导出 .js 和 .scss 文件也不是什么稀奇事，在 webpack 里使用 extract-text-webpack-plugin 来把 .scss 到 css 处理结果单独导出成为独立样式文件更不是什么稀奇事。

但是结合到一起就可能导致一些不该出现的问题，比如就是把 webpack 的输出 UMD 搞乱。

这里单纯地做记录，正确和错误的区别是取决于外部通过 require.js 引入是否能得到结果来判定。webpack 那块 output 的内容，不太确定到底是错在哪里。

问题重现

目录结构和内容

JavaScript 和 CSS 内容

❌ 导致问题发生的 webpack 配置和文件引入方式

主要就是 webpack 入口设置 entry 那里。

Webpack 输出结果（有区别的部分）

✅ 不会出现问题的 webpack 配置和文件引入方式

webpack 输出结果（有区别的部分）

备份

留一份完整的配置和输出结果，作为 reference：

• 正确的配置，输出结果；
• 错误的配置，输出结果。