const path = require('path')
module.exports = {
  // 将体积较大的第三方依赖移除，由使用者自行安装【本地启动时需要需要加上，故此从package.json添加标记--依赖 cross-env】
  configureWebpack: (config) => {
    // 动态判断环境变量
    const isProduction = process.env.BUILD_ENV === 'production';
    if (isProduction) {
      // 生产环境下使用 externals 排除大体积依赖
      config.externals = {
        echarts: 'echarts',
        'element-ui': 'ELEMENT',
      };
    }
  },
  lintOnSave: false, // 去掉eslint保存检查
  css: {
    extract: true, // css单独文件
  },
  // 修改 pages 入口
  pages: {
    index: {
      entry: 'examples/main.js', // 入口
      template: 'public/index.html', // 模板
      filename: 'index.html' // 输出文件
    }
  },
  // 扩展 webpack 配置
  chainWebpack: config => {
    // 启用压缩降低体积
    config.optimization.minimize(true);
    // @ 默认指向 src 目录，这里要改成 examples
    // 另外也可以新增一个 ~ 指向 packages
    config.resolve.alias
      .set('@', path.resolve('examples'))
      .set('~', path.resolve('packages'))

    // 把 packages 和 examples 加入编译，因为新增的文件默认是不被 webpack 处理的
    config.module
      .rule('mjs')
      .test(/\.mjs$/)
      .type('javascript/auto') // 强制将 .mjs 文件视为 ES Module
      .include.add(/node_modules/) // 包括 node_modules 中的 .mjs 文件
      .end()
      .use('babel-loader')
      .loader('babel-loader');
  },
  devServer: {
    // 环境配置
    host: 'localhost',
    port: 50,
    https: false,  //是否以https启动
    open: true, //配置自动启动浏览器(按照devServer的配置host:port)
    // proxy: {}
  },
  pluginOptions: {
    // 第三方插件配置
    // ...
  }
}
