webpack打包后ie访问出现“btoa“未定义

问题描述

最近在用最新webpack5重新写配置文件时发现，在js在js中引入scss文件，打包后在chrome浏览器是并没有问题，但由于项目兼容到ie9，在ie9做测试时发现报错"btoa"未定义。mdn上查询到btoa是在ie10以上才有效。

思考解决过程

在webpack配置里已经使用对ES6的语法进行babel兼容到ie9，一开始认为是babel对typescript的语法兼容配置问题，但经过对ts文件的排查发现问题并不在babel上，看了打包的源码也发现是对css的sourcemap指向，那么就是说这些不是在于自己写的代码身上的兼容问题。于是认为是sourcemap的问题，在所有的生产模式下可以设置sourcemap的都设为false，且将devtool也设置为nosourcemap，但问题依然存在。最后终于将问题锁定在对于css的loader身上。

解决方法

对了css的编译loader进行一个个排查。我在开发环境使用的是style-loader，生产环境用了MiniCssExtractPlugin进行css分离，用了sass，配置如下：

{
   
   
                test: /\.(c|sc)ss$/,
                include: [
                    resolve("src"),
                ],
                use