create-react-app常用自定义配置教程示例

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass

yarn add react-app-polyfill

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9'

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

yarn add http-proxy-middleware

const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:6000', // 请求接口地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '/'
      }
    })
  )
}

module.exports = {
  dotenv: resolveApp('.env'), // 项目环境变量文件
  appBuild: resolveApp('dist'), // 项目构建输出目录，默认 build
  appPublic: resolveApp('public'), // 静态目录
  appHtml: resolveApp('public/index.html'), // index.html
  appIndexJs: resolveModule(resolveApp, 'src/index'), // 项目入口文件
  proxySetup: resolveApp('src/setupProxy.js') // 配置 proxy 文件
}

{
  "script": {
    "start": "cross-env BROWSER=none node scripts/start.js"
  }
}

{
  "homepage": "/e-admin/"
}

{
  "script": {
    "build": "cross-env PUBLIC_URL=/e-admin/ node scripts/build.js"
  }
}

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

{
  "script": {
    "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js"
  }
}

{
  "script": {
    "start": "cross-env EXTEND_ESLINT=true node scripts/start.js"
  }
}

yarn add @babel/plugin-proposal-decorators

{
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

"javascript.implicitProjectConfig.experimentalDecorators": true

// .env
NODE_ENV=development
REACT_APP_MODE=dev
// .env.alpha
NODE_ENV=production
REACT_APP_MODE=alpha
// .env.prod
NODE_ENV=production
REACT_APP_MODE=prod

{
  "script": {
    "build:alpha": "cross-env MODE_ENV=alpha node scripts/build.js",
    "build:prod": "cross-env MODE_ENV=prod node scripts/build.js"
  }
}

// const NODE_ENV = process.env.NODE_ENV;
const NODE_ENV = process.env.MODE_ENV || process.env.NODE_ENV;

// axios.baseURL
const baseURL = {
  dev: 'http://localhost:3000',
  alpha: 'http://alpha.xxx.com',
  prod: 'http://xxx.com'
}[process.env.REACT_APP_MODE]

yarn add webpackbar

const WebpackBar = require('webpackbar')
plugins: [
  // ...
  new webpack.ProgressPlugin(),
  new WebpackBar()
]

yarn add compression-webpack-plugin

const CompressionPlugin = require('compression-webpack-plugin')
const isGzip = process.env.GENERATE_GZIP_FILE === 'true'
plugins: [
  // ...
  isEnvProduction && isGzip && new CompressionPlugin({
    filename: '[path].gz[query]', // 新版本 asset 属性已更换为 filename
    algorithm: 'gzip',
    test: /\.js$|\.css$/,
    threshold: 10240,
    minRatio: 0.8
  })
]

yarn add webpack-bundle-analyzer

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const isBundleAnalyzer = process.env.GENERATE_BUNDLE_ANALYZER_REPORT === 'true'
plugins: [
  // ...
  isEnvProduction && isBundleAnalyzer && new BundleAnalyzerPlugin()
]

import { Button } from 'antd'
import 'antd/dist/antd.css'
function App() {
  return (
    <Button type="primary">按钮</Button>
  )
}

yarn add less less-loader

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 加上匹配 less 文件的正则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
  test: sassModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 3,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
        getLocalIdent: getCSSModuleLocalIdent,
      },
    },
    'sass-loader'
  ),
},
// 在下面加上 less-loader 配置
{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
// Adds support for CSS Modules, but using less
// using the extension .module.less
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: {
          getLocalIdent: getCSSModuleLocalIdent
      }
    },
    'less-loader'
  ),
},

// 将 if (preProcessor) {} 中的代码替换，实际上就是判断是`less-loader`就生成针对less的options
if (preProcessor) {
  let preProcessorRule = {
    loader: require.resolve(preProcessor),
    options: {
      sourceMap: true
    }
  }
  if (preProcessor === 'less-loader') {
    preProcessorRule = {
      loader: require.resolve(preProcessor),
      options: {
        sourceMap: true,
        lessOptions: { // 如果使用less-loader@5，需要移除 lessOptions 这一级
          javascriptEnabled: true,
          modifyVars: {
            'primary-color': '#346fff', // 全局主色
            'link-color': '#346fff' // 链接色
          }
        }
      }
    }
  }
  loaders.push(
    {
      loader: require.resolve('resolve-url-loader'),
      options: {
        sourceMap: isEnvProduction && shouldUseSourceMap,
      },
    },
    preProcessorRule
  );
}

@import '~antd/lib/style/themes/default.less';
@import '~antd/dist/antd.less';
@import 'customer-theme-file.less'; // 用于覆盖默认变量

yarn add babel-plugin-import

"plugins": [
  [
    "babel-plugin-import",
    {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": true
    }
  ]
]