react+webpack+antd项目搭建

安装create-react-app cli

npm install -g create-react-app

创建工程

create-react-app my-app

进入根目录

cd my-app

本地服务启动，将会在本地3000端口启动

npm run start

安装所需插件react-router axios less less-loader

yarn add react-router-dom axios less less-loader

安装AntD(基与less)

暴露webpack配置项（config文件夹）

npm run eject

修改less-loader
方式一：由于项目中不使用sass直接把sass配置改成了less
config里面的webpack-config-dev文件里修改了两个地方
然后修改webpack.config.pro.js文件配置，操作和webpack.config.dev.js相同
react+webpack+antd项目搭建

第一处

  // const cssRegex = /\.css$/;
    const cssRegex = /\.(css|less)$/;

第二处
最后加一个配置

const getStyleLoaders = (cssOptions, preProcessor) => {
...
const loaders = [
{
      loader: require.resolve('less-loader')
    }
]
}

安装antd

yarn add antd
import { Button } from 'antd';
import 'antd/dist/antd.css'

react+webpack+antd项目搭建

相关推荐