webpack3 create-react-app ant-mobile 搭建项目

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试试；