webpack编译vue样式 "export 'default' (imported as 'mod

最近升级了脚手架的编译层的代码，vue同学反馈过来说编译样式出现警告，记录下问题及解决方法

错误信息

WARNING in ../vueSample/js/index/_pages/app.vue?vue&type=style&index=0&lang=stylus& 1:469-472
"export 'default' (imported as 'mod') was not found in '-!../../../../../node_modules/mini-css....

问题webpack配置

{
  test: /\.styl(us)?$/,
  use: envAttributs('styl', [
    'stylus-loader'
  ])
},

// 辅助方法 
function envAttributs(param){
  return ([
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: domain,
      }
    },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        url: false
      }
    },
    'postcss-loader',
  ]).concat(param)
}

问题解决

经网上多番搜索，定位到问题出在MiniCssExtractPlugin.loader。上一次为了解决样式背景图片不输出的问题，修改过MiniCssExtractPlugin.loader的配置

options: {
  publicPath: domain, // domain域名指向开发服务，解决css中url图片定位的问题
}

开启参数设置后导致vue样式编译提示警告信息，后来通过查阅通过MiniCssExtractPlugin官方文档了解到MiniCssExtractPlugin.esModule属性默认为true。而webpack4开启tree shaking功能也需要设置esModule为true，但正是该参数导致vue2编译样式时出错。修改参数配置

options: {
  publicPath: domain, // domain域名指向开发服务
  esModule: false,  // 将此属性设为false，问题解决
}

esModule esModule即ES MODULE语法，支持编译时加载，不同于CommonJS运行时加载。在编译时就能够确定模块的依赖关系，以及输入和输出的变量。ESM可以做到tree shaking。可以只加载模块的部分内容

源码