create-react-app+antd+less开发环境基础配置方法
Step1：使用create-react-app建立项目
1. yarn create react-app my-test-app
Step2：暴露webpack配置
1. 在my-test-app目录下执行：yarn eject (无法启动的话，删除node_modules目录与yarn.lock后重新执行yarn)
2. 执行完毕后可以看到项目中多了一些文件夹，进入config目录可以找到webpack.config.js，即我们之后需要修改配置的文件。
Step3：配置less
1. 安装：yarn add less less-loader --save-dev
2. 打开webpack.config.js, 找到：
// style files regexes
.....
// 添加less解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
3. 在module -> rules中增加：
// Less 解析配置
{
test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
sideEffects: true,
},
{
test: lessModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
)
},
// 旧版如下*******************************************
2. 打开webpack.config.dev.js文件（prod文件与之类似）：
（找到如下代码段，并修改高亮处的代码）
（1）第一处（注意要按照style-loader，css-loader，postcss-loader，less-loader的顺序）
{
test: /\.(css|less)$/,
use: [
require.resolve('style-loader'),
{...},
{
loader: require.resolve('less-loader'),
},
],
},
（2）第二处
{
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [
/\.(js|jsx|mjs)$/,
/\.html$/,
/\.json$/,
/\.(css|less)$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// ****************************************8
Step4：配置antd
1. 安装：
（1）yarn add antd
（2）yarn add babel-plugin-import --dev
2. 增加.babelrc文件：
{
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
]
]
}
// 旧版*************************************88
2. 打开webpack.config.dev.js文件（prod文件与之类似）：
（找到如下代码段，并新增高亮处的代码）
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
plugins: [
['import', [{ libraryName: "antd", style: 'css' }]],
],
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},
// ****************************8
Step5：配置相对根路径
1、打开webpack.config.dev.js文件（prod文件与之类似）：
（找到如下代码段，并新增高亮处的代码）
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
'@': path.resolve(__dirname, '../src'),
},
