webpack3 create-react-app ant mobile 搭建项目
1、全局安装create-react-app(注:千万不要安装yarn)
npm install -g create-react-app
2、找个位置创建一个项目
create-react-app ant-mobile
3、运行一下
cd ant-mobile npm start
4、解压配置
npm run eject
5、安装antd-mobile
npm install antd-mobile --save
6、按需加载
npm install babel-pluigin-import --save-dev
打开webpack.config.dev.js文件修改如下:
// Process JS with Babel. { test: /\.(js|jsx)$/,include: paths.appSrc,loader: require.resolve('babel-loader'),// 这里下面是添加的 options: { plugins: [ ['import',{ libraryName: 'antd-mobile',style: 'css' }],],cacheDirectory: true,} }
7、添加less处理及px转rem
npm install less less-loader --save-dev npm install postcss-pxtorem --save-dev
打开webpack.config.dev.js文件修改如下:
{ // 修改为加载两种 test: /\.(css|less)$/,use: [ require.resolve('style-loader'),{ loader: require.resolve('css-loader'),options: { importLoaders: 1,},// 添加以下这个语句块 { loader: require.resolve('less-loader') },{ loader: require.resolve('postcss-loader'),options: { ident: 'postcss',plugins: () => [ require('postcss-flexbugs-fixes'),autoprefixer({ browsers: [ '>1%','last 4 versions','Firefox ESR','not ie < 9',flexBox: 'no-2009',}),// 添加以下这句 pxtorem({ rootValue: 100,propWhiteList: [] }) ],} ],
8、添加加载处理svg
npm install svg-sprite-loader --save-dev
打开webpack.config.dev.js文件添加如下:
{ test: /\.(svg)$/i,loader: 'svg-sprite-loader',include: [ require.resolve('antd-mobile').replace(/warn\.js$/,''),// 1. svg files of antd-mobile path.resolve(__dirname,'../src/'),// folder of svg files in your project ] }
到此基本完成配置
随便添加个antd-mobile到component试试;