使用React框架之扩展webpack

扩展webpack功能

在看ant design的时候推荐使用@craco/craco的方式扩展我们的webpack功能

1. 插件安装

yarn add @craco/craco -D

2. 配置config

下面自定义了路径别名， ant design的按需加载， less。其他的可以根据自己的需要配置

const path = require('path');
const CracoLessPlugin = require('craco-less');
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src'),
    },
  },
  babel: {
    plugins: [
      ['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }],
      ['@babel/plugin-proposal-decorators', { legacy: true }],
    ],
  },
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

3. 命令重写

  "scripts": {
    + "start": "craco start",
    + "build": "craco build",
  },

4. 一个模版

import React from 'react';
import './index.less'

inteface HomeProps {
  children: React.ReactNode
}

const Home:React.FC<HomeProps> = ({children}) => {
  return (
    <div>
      {children}
    </div>
  )
}

export default Home;

为编译器配置路径别名

假如直接修改tsconfig.json,在运行craco时总是重写tsconfig。在issues上找到可以重新建立一个配置文件，然后在tsconfig.json中引入，然后试了一下发现是有用的。

// paths.json
{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "esnext",
    "lib": ["esnext", "dom"],
    "sourceMap": true,
    "baseUrl": ".",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowJs": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "strict": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src"]
}

{
  "extends": "./paths.json"
}