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

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

一、全局安裝create-react-app(注：千萬不要安裝yarn)

npm install -g create-react-app

二、找個位置建立一個項目

create-react-app ant-mobile

三、運行一下

cd ant-mobile
npm start

四、解壓配置

npm run eject

五、安裝antd-mobile

npm install antd-mobile --save

六、按需加載

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,
    }
  }

七、添加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: [] })
          ],
        },
      }
    ],
  },

八、添加加載處理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試試；