craco.config 配置记录

前言

最近尝试试用了craco来打包文件，涉及到craco.config.js的配置，记录一下相关的自定义配置

初始化一个craco配置对象

module.exports = {
  // 修改webpack配置
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // 在这里修改webpack配置
      return webpackConfig;
    }
  },
  // 修改babel配置
  babel: {
    plugins: [
      // 在这里添加babel插件
    ],
    loaderOptions: {
      // 在这里添加babel-loader选项
    }
  },
  // 修改开发服务器配置
  devServer: {
    // 在这里添加dev server配置
  }
};

craco 提供了三个可定制化的选项 webpack、babel、和devServer。可以添加所需的加载器(loader)、插件(plugin)、选项(option)来进行自定义配置；

webpack里可以配置alias

alias: {
  "@": path.resolve(__dirname, "./src")
},

配置configure

configure: (webpackConfig, { env, paths }) => {
  // 查找到处理CSS样式的loader规则
  const cssRule = webpackConfig.module.rules.find(
    rule => rule.test.toString() === /\.(css|scss)$/.toString()
  );

  // 添加MiniCssExtractPlugin.loader到loader列表中
  cssRule.use.unshift(MiniCssExtractPlugin.loader);

  return webpackConfig;
},
plugins: [
  new MiniCssExtractPlugin()
]

babel添加插件来支持处理新的ES语法

module.exports = {
  babel: {
    plugins: [
      '@babel/plugin-proposal-class-properties'
    ]
  }
}

devServer配置代理

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

module.exports = {
  devServer: {
    proxy: [{
        context: ['/evh', '/api'],
        target: 'http://localhost:3001',
        changeOrigin: true
    }],
  }
}