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

roygbip

2019-06-25

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

antd-mobile