首先安装axios

yarn add axios  || npm install axios 

第二步直接通过es6的模块化导入

//导入axios 
import axios from 'axios';

2.完整配置文件+项目

1.首先我们创建一个项目项目
2.在创建一个文件夹叫src里面有
css文件夹里面创建所有页面的css文件后缀为.less
fonts文件夹里面存放的为iconfont图标除（带demo，json，js）不要剩下的都要；
images文件夹里面放图片
js里面放所有的js
lib 文件夹里面放所有的插件
utils文件夹里面放所有工具函数axios请求
在src文件夹里面创建要的页面
3.然后git init 
然后cmd yarn init -y
如果我们连接git我们就要去git上面创建一个项目
记住千万在git上面电原成仓库点击初始化
下面有四句话除了git init 剩下三句全部复制gitbush上面提交一下
4.创建webpack.config.js

/**
 * webpack.config.js 打包配置文件
 */

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')


module.exports = {
    entry: {
        common:'./src/js/common.js', 
        home:'./src/js/home.js',  
        login:'./src/js/login.js',  
        register:'./src/js/register.js', 
    },
    output: {
        path: path.resolve(__dirname, 'dist'),   
        filename: 'js/[name]-[hash].js',         
        publicPath: './'             
    },
    module: {
        rules: [
            {
                test: /\.css$/,        
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                },'css-loader','postcss-loader']
            },
            {
                test: /\.less$/, //配置less处理器
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                      publicPath: '../'
                    }
                }, 'css-loader', 'postcss-loader','less-loader']
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader',     
                options: {
                    name: '[hash].[ext]',  
                    limit: 30 * 1024, 
                    esModule: false,  
                    outputPath:'img'
                },
            },
            {
                test: /\.html$/,    
                loader: 'html-loader'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/, 
                loader: 'file-loader',
                options:{
                    outputPath:'fonts'  
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',    
                exclude: /node_modules/, 
            }

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({   
            template: './src/page/home.html',         
            filename:'home.html',
            chunks:['home','common']                     
        }),
        new HtmlWebpackPlugin({   
            template: './src/page/login.html',      
            filename:'login.html',
            chunks:['login','common']
        }),
        new HtmlWebpackPlugin({   
            template: './src/page/register.html',      
            filename:'register.html',
            chunks:['register','common']
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash].css' 
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new CleanWebpackPlugin()

    ],
    mode: process.env.NODE_ENV,
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true, 
        port: 8080, 
        open: true, 
        publicPath: '/',
        openPage: 'index.html',
    },
    target: 'web', 
}

初始化的时候有一个 package.json

{
  "name": "fitness-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack serve",
    "build": "cross-env NODE_ENV=production webpack"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.0",
    "file-loader": "^6.2.0",
    "html-loader": "1.3.2",
    "html-webpack-plugin": "5.0.0-beta.1",
    "less": "^4.1.1",
    "less-loader": "^8.0.0",
    "mini-css-extract-plugin": "^1.4.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "5.11.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {},
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.1%"
    ]
  }
}