/*
 * @Autor: dingxiaolin
 * @Date: 2020-05-10 18:48:05
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2020-05-31 21:49:22
 * 基于customzie和react-app-rewired的定制化配置文件
 */

// 从customize-cra引入一些相关的方法
const {
  override,
  disableEsLint,
  addLessLoader,
  fixBabelImports,
  addDecoratorsLegacy,
  useBabelRc,
  addWebpackAlias,
  addWebpackPlugin,
  addWebpackExternals,
} = require("customize-cra");
const path = require("path");
const chalk = require("chalk");
const theme = require("./theme");
const ProgressBarPlugin = require("progress-bar-webpack-plugin"); //打包进度
const HtmlWebpackPlugin = require("html-webpack-plugin"); //html编译插件，根据变量替换部分内容
// 是否使用cdn
const externals = process.env.REACT_APP_EXTERNALS;
// 关闭mapSource
process.env.GENERATE_SOURCEMAP = "false";
module.exports = override(
  //disable eslint in webpack
  disableEsLint(),
  //覆盖主题色
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: theme,
  }),
  //支持装饰器decorator
  addDecoratorsLegacy(),
  //按需引入组件
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: true,
  }),
  //使用babel
  useBabelRc(),
  //使用别名alias
  addWebpackAlias({
    "@": path.resolve(__dirname, "src"),
    components: path.resolve(__dirname, "src/components"),
  }),
  // run progress
  addWebpackPlugin(
    new ProgressBarPlugin({
      complete: "",
      format: `${chalk.green(process.env.NODE_ENV)} [ ${chalk.green(
        ":bar"
      )} ] ':msg:' ${chalk.bold("(:percent)")}`,
      clear: true,
    })
    // new HtmlWebpackPlugin({
    //   template: `${__dirname}/public/index.html`, //create-react-app默认创建的html文件路径，且build写死了必须使用此文件，故直接以它作为模板
    //   externals //设置一个externals变量（将会被templateParameters对应的generator传入模板中）
    // }),
    // externals ? addWebpackExternals({
    //   'react': 'React',
    //   'react-dom': 'ReactDom',
    //   jquery: 'jQuery'
    // }): undefined
  )
);