前端项目基本配置

chalk（node终端样式库）

 // 颜色字体
 log( chalk.red("红色") )
 
 // 背景色
 log( chalk.bgBlue("蓝色背景") )

// 样式字体
 log( chalk.bold("加粗") )
 
 // 多参数
 log( chalk.blue("name", "age", "job") )
 
 // ES6 多行文本
 log(
 // 多行文本将保留缩进格式
 chalk.blue(name: Rogan age: ${25} job: ${ 'IT' })
 )
 
 // 其他颜色设置方式
 log(chalk.keyword("orange")(' keyword ')) // 关键字
 log(chalk.rgb(100, 100, 100)(' rgb ')) // rgb
 log(chalk.hex('#ffffff')(' hex ')) // hex
 
 // 样式组合
 log(colors: ${chalk.blue('blue')}, ${chalk.red('red')}) // 拼接

log(chalk.blue.bold("Title")) // 链式组合

log( chalk.bgYellow(error: ${chalk.red(" chalk is undefined ")}) ) // 嵌套

// 自定义组合
 const error = chalk.bgRed;
 const warning = chalk.yellow.bold;</pre>

//config-overrides.js中进行配置终端展示进度条
 addWebpackPlugin(new ProgressBarPlugin({
    complete: "█",
    format: `${chalk.green('Building')} [ ${chalk.green(':bar')} ] ${chalk.bold(':percent')}`,
    clear: true
  })

customize-cra

• 添加webpack alias

const { override, addWebpackAlias } = require('customize-cra');
const path = require('path');
module.exports = {
  addWebpackAlias({
    '@': path.resolve(__dirname, 'src'),
    'components': path.resolve(__dirname, 'src/components');
  })
}

• 配置全局样式，并添加 Less 支持，关闭sourcemap：

const { override, fixBabelImports, addLessLoader } = require("customize-cra");
const theme = require('./theme.json');
process.env.GENERATE_SOURCEMAP = "false";

module.exports = override(
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: theme,
  })
);

Source map:就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码