搭建react项目

1.打开新建的项目空文件夹，终端输入命令：npm init，文件夹生成package.json文件；

2.安装webpack、webpack-cli和cross-env：npm install webpack webpack-cli cross-env --save-dev；

3.在根目录下新建src文件夹，文件夹下新建index.js文件，作为被编译文件webpack及webpack的入口文件；

4.在根目录下新建webpack.config.js文件作为webpack核心配置文件；

5.在webpack.config.js文件添加如下代码：

const path = require('path')

const isLocal = process.env.LOCAL === 'true'

module.exports = {
  mode: isLocal ? 'production' : 'development', // 表示webpack打包环境是开发环境还是生产环境
  entry: './src/index.js', // 项目的入口文件，路径相对于项目的根路径
  // 配置输出信息
  output: {
    filename: 'bundle.js', // 打包输出文件名，后期可改成按规则动态生成
    path: path.resolve(__dirname, './dist'), // 输出的路径，路径是当前目录
  }
}

6.在index.js文件添加如下代码：

function sum (a, b) {
    return a + b;
}
var result = sum (12, 23);
console.log(result);

7.在package.json的script属性下添加如下行：

"build": "cross-env LOCAL=false webpack"

8.终端输入命令：npm run build，运行成功且根目录出现dist文件夹并且有打包出的bundle.js文件，说明打包配置成功；

9.开始做高级语法转换为ES5的配置，先安装相关插件：npm install babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/polyfill @babel/runtime @babel/plugin-transform-runtime @babel/plugin-syntax-dynamic-import --save-dev；

10.根目录下新建babel.config.js文件，添加如下配置，或者直接写在webpack.config.js文件内：

const babelConfig = {
  // 相当于plugins的一个集合，即插件集，就不需要在plugins中一个个插件的配置了
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry', // 如果引入了@babel/polyfill，这个属性可以使@babel/polyfill按需引入
        corejs: 2,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: ["@babel/plugin-syntax-dynamic-import", ["@babel/plugin-transform-runtime"]], // @babel/runtime中的插件
}

module.exports = babelConfig

11.回到webpack.config.js内添加日下babel配置，如下：

const path = require('path')

const isLocal = process.env.LOCAL === 'true'

module.exports = {
  mode: isLocal ? 'production' : 'development', // 表示webpack打包环境是开发环境还是生产环境
  entry: './src/index.js', // 项目的入口文件，路径相对于项目的根路径
  // 配置输出信息
  output: {
    filename: 'bundle.js', // 打包输出文件名，后期可改成按规则动态生成
    path: path.resolve(__dirname, './dist'), // 输出的路径，路径是当前目录
  },
  module: {
    rules: [
      {
        // 配置babel-loader
        test: /\.js/,
        use: ['babel-loader?cacheDirectory=true'],
        include: path.join(__dirname, './src'),
      }
　　]
  }
}

12.将index.js文件内函数改为箭头函数并添加Promise，保存后再次打包，能够正常打包并将转换后代码保存到bundle.js，代表babel配置成功；

13.css预处理器转换配置，先安装相关插件：npm install stylus stylus-loader less less-loader sass-loader node-sass css-loader style-loader --save-dev，并添加如下配置：

const path = require('path')

const isLocal = process.env.LOCAL === 'true'

module.exports = {
  mode: isLocal ? 'production' : 'development', // 表示webpack打包环境是开发环境还是生产环境
  entry: './src/index.js', // 项目的入口文件，路径相对于项目的根路径
  // 配置输出信息
  output: {
    filename: 'bundle.js', // 打包输出文件名，后期可改成按规则动态生成
    path: path.resolve(__dirname, './dist'), // 输出的路径，路径是当前目录
  },
  module: {
    rules: [
      {
        // 配置babel-loader
        test: /\.js/,
        use: ['babel-loader?cacheDirectory=true'],
        include: path.join(__dirname, './src'),
      },
　　　　// 版本不同，写法也不同
      {
        test: /\.(less)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [require('autoprefixer')],
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      }
　　]
  }
}

14.src目录新增index.less文件，写入如下代码：

@color: green;

h {
  color: @color;
}

15.index.js文件引入样式文件，重新打包，可以看到新写的样式文件被打包进bundle.js文件；

16.配置处理静态资源文件，安装相关插件：npm install file-loader url-loader --save-dev，并添加如下配置：

const path = require('path')

const isLocal = process.env.LOCAL === 'true'

module.exports = {
  mode: isLocal ? 'production' : 'development', // 表示webpack打包环境是开发环境还是生产环境
  entry: './src/index.js', // 项目的入口文件，路径相对于项目的根路径
  // 配置输出信息
  output: {
    filename: 'bundle.js', // 打包输出文件名，后期可改成按规则动态生成
    path: path.resolve(__dirname, './dist'), // 输出的路径，路径是当前目录
  },
  module: {
    rules: [
      {
        // 配置babel-loader
        test: /\.js/,
        use: ['babel-loader?cacheDirectory=true'],
        include: path.join(__dirname, './src'),
      },
　　　　// 版本不同，写法也不同
      {
        test: /\.(less)$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [require('autoprefixer')],
              },
            },
          },
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
      {
        test: /\.(jpg|png|jpeg|gif)$/,
        use: [
          // file-loader打包的图片或文件会生成一个随机的hash值作为图片名字，url-loader封装了file-loader，文件大小小于limit，url-loader会把文件转为base64,大于limit则调用file-loader进行处理，参数也会直接传给file-loader
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'img/[name].[hash:8].[ext]',
                },
              },
            },
          },
        ],
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 4096,
              fallback: {
                loader: 'file-loader',
                options: {
                  name: 'media/[name].[hash:8].[ext]',
                },
              },
            },
          },
        ],
      }
　　]
  }
}

17.src文件夹内新建asset文件夹并添加两张图片，在index.js引入两张图片，保存后重新打包，可以看到图片也被打包到dist文件夹的img文件夹内，文件名为上述options属性配置的name；

18.抽离公共代码，在webpack.config.js内添加如下配置：

optimization: {
    splitChunks: {
      cacheGroups: {
        // 打包公共模块
        commons: {
          chunks: 'initial', // initial表示提取入口文件的公共部分
          minChunks: 2, // 表示提取公共部分最少的文件数
          minSize: 0, // 表示提取公共部分最小的大小
          name: 'commons', // 提取出来的文件命名
        },
      },
    },
  }

19.添加文件别名、文件扩展名配置，在webpack.config.js内添加如下配置：

resolve: {
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      pages: path.join(__dirname, './src/pages'),
      components: path.join(__dirname, './src/components'),
      actions: path.join(__dirname, './src/redux/actions'),
      reducers: path.join(__dirname, './src/redux/reducers'),
      images: path.join(__dirname, './src/images'),
    },
  }

20.配置文件热更新，安装相关插件：npm install webpack-dev-server html-webpack-plugin --save-dev，并在webpack.config.js内添加如下配置：

引入插件：

const HtmlWebpackPlugin = require('html-webpack-plugin')

  plugins: [

    // 实例化Html模板

    new HtmlWebpackPlugin({

      template: path.resolve(__dirname, './index.html'),

    }),

  ],

devServer: {
    hot: true,
    open: true,
    port: 8080,
    static: './dist',
    historyApiFallback: true, // 解决启动后刷新404
}

21.在package.json文件添加如下行：

"dev": "cross-env LOCAL=true webpack-dev-server"

终端运行命令：npm run dev，浏览器自动打开http://localhost:8080页面，修改index.js文件页面会跟着改动，热更新配置成功；

22.清理上一次打包记录和结果，安装插件：npm install clean-webpack-plugin --save-dev，并进行如下配置：

引入插件：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [
        new CleanWebpackPlugin(),          //实例化clean-webpack-plugin插件
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../index.html')
        })
    ]

23.集成react，安装相关插件：npm install react react-dom --save-dev，npm install react-router-dom --save-dev；

24.引入antd design，安装相关插件：npm install antd --save-dev；

25.添加express和axios，打通前后端，安装插件：npm install express axios --save-dev，根目录新增server.js文件，添加如下代码：

const express = require('express')
const app = express()

app.get('/api/xxx', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.send({
    name: 'xxxxxx',
    comurl: 'baidu.com',
  })
})

app.listen(3000, () => {
  console.log('app listen 3000 port')
})

26.终端输入命令：node server.js运行文件，在浏览器打开链接：http://localhost:3000/api/xxx，可以看见server文件里面写的测试数据；

27.以下命令可以调用这个接口获取到返回的数据：

axios.get('http://localhost:3000/api/xxx').then(res => {
      console.log(res)
})

28.请求接口遇到跨域问题需要添加跨域配置，在webpack.config.js内添加如下配置：

devServer: {
    hot: true,
    open: true,
    port: 8080,
    static: './dist',
    historyApiFallback: true, // 解决启动后刷新404
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {
          '^/api': '/api',
        },
        changeOrigin: true, // 让target参数是域名
        secure: false,// 设置支持https协议代理
      },
    }
  }

完