mini-css-extract-plugin TypeError: $ is not a function 问题解决

问题

mini-css-extract-plugin 在抽取 css 的时候，发现了调用不了的 $ 。

ERROR in ‘./index.css’
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: $ is not a function

其根本原因是，你使用了 babel 相关的 polyfill，比如 @babel/preset-env 的 useBuiltIns: 'usage' 。

由于 css-loader 是异步 callback 的，在 mini-css-extract-plugin 还没作用于 css 的时候，css-loader 把 css 提取到 js 模块中，被 babel 的 polyfill 处理包裹了，产生了无法调用的 $ 。

解决

排除 css-loader 被 babel 的处理：

{
	test: /\.(js|jsx|ts|tsx)$/,
	loader: 'babel-loader',
	exclude: /node_modules/ // 或 /node_modules\/(css-loader)/
}

如果对 node_modules 有严格 diy 管控场景，可以分组：

{
	exclude: [/node_modules\/(css-loader)/, path.resolve(__dirname, 'node_modules')]
}