Extend webpack functionality
When looking at Ant Design I recommend using @craco/craco to extend our Webpack functionality
1. Install the plug-in
yarn add @craco/craco -D
Copy the code2. Configure the config
Below are custom path aliases, Ant Design’s on-demand, less. Others can be configured according to your own needs
const path = require('path');
const CracoLessPlugin = require('craco-less');
module.exports = {
webpack: {
alias: {
The '@': 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.
},
},
},
},
].
};
Copy the code3. Rewrite the command
"scripts": {
+ "start": "craco start".
+ "build": "craco build".
},
Copy the code4. A template
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;
Copy the codeConfigure the path alias for the compiler
If you modify tsconfig.json directly, you always override tsconfig when running Craco. You can create a new configuration file in tsconfig.json, and then try to find it is useful.
// 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"]
}
Copy the code{
"extends": "./paths.json"
}
Copy the code