笔记: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 来把 .scsscss 处理结果单独导出成为独立样式文件更不是什么稀奇事。

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

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

问题重现

目录结构和内容

JavaScript 和 CSS 内容

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

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

Webpack 输出结果(有区别的部分)

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

webpack 输出结果(有区别的部分)

备份

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

感谢阅读

你们好, 2018 年初把小站从 Jekyll 迁移到 Hugo 的过程中,删除了评论区放的 Disqus 插件,考虑有二:首先无论评论、还是对笔记内容的进一步讨论,读者们更喜欢通过邮件、或者 Twitter 私信的方式来沟通;其次一年多以来 Disqus 后台能看到几乎都是垃圾留言(spam),所以这里直接贴一下邮件、以及 Twitter 账户 地址。

技术发展迭代很快,所以这些笔记内容也有类似新闻的时效性,不免有过时、或者错误的地方,欢迎指正 ^_^。

BEST
Lien(A.K.A 胡椒)
本站总访问量 本站总访客量 本文总阅读量