feat: url-loader\file-loader处理图片\字体

config/webpack.common.js

@@ -25,6 +25,28 @@ module.exports = {
         use: 'babel-loader',
         exclude: /node_modules/,
       },
+      {
+        test: /\.(svg|png|jpe?g|gif|mp3|mp4)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              limit: 8192,
+            },
+          },
+        ],
+      },
     ]
   },
   plugins: [

src/containers/home/index.js

@@ -1,5 +1,9 @@
 import React, { Component } from  'react'
 import { isValid } from '@/utils';
+import { Button } from 'antd';
+import picPikachu from '@/assets/pikachu.jpg';
+// import './index.less';
+
 class Home extends Component{
   constructor(props) {
     super(props)
@@ -10,12 +14,15 @@ class Home extends Component{
   }
   render() {
     return(
-      <div >
-        home
+      <div className='the-home'>
+        <h3>home</h3>
         {
           'isValid:' + isValid(1)
         }
-        <button onClick={() => this.props.history.push({pathname: '/detail'})}>to detail</button>
+        <div >
+          <Button onClick={() => this.props.history.push({pathname: '/detail'})}>to detail</Button>
+        </div>
+        <img src={picPikachu} alt=""/>
       </div>
     )
   }

src/containers/home/index.less

@@ -0,0 +1,3 @@
+.the-home {
+  background-color: #ccc;
+}