React Webpack4 ant design项目搭建（一）

1、搭建React项目

    创建文件夹

     执行 npm init初始化项目

    安装react,react-dom两个库（react为核心库，react-dom为渲染库）

    最简单的项目创建完毕

 

2、项目添加webpack4

    安装项目依赖：

  必备基础模块：

     npm install --save-dev webpack webpack-dev-server webpack-cli 

es6和jsx支持：

    npm install --save-dev babel-core babel-loader babel-preset-es2017 babel-preset-react

生成html文件和clean清理指定目录模块

      npm install --save-dev html-webpack-plugin clean-webpack-plugin

 解析css语法

     npm install --save-dev css-loader style-loader

3、编写webpack配置文件（根据自己的项目目录）

const path = require('path');    #nodejs内置模块
const htmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
  mode: 'production',                                   # webpack4.x必须定义
  entry: path.resolve(__dirname, './src/index.js'),     # 入口文件
  output: {                                             # 出口文件
    path: path.resolve(__dirname, './dist'),
    filename: 'bunlde.js'
  },
  devServer: {                                          # 配置webpack-dev-server
    contentBase: path.join(__dirname, 'dist'),           
    compress: true,
    port: 9000
  },
  module: {                                            
    rules: [                                           # webpack4.x不再使用loaders
      {                                                # 改为rules + use
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'),
        exclude: path.resolve(__dirname, 'node_modules'),
        use: {
          loader: 'babel-loader',                       # 解析ES6语法
          options: {
            presets: ['es2017', 'react']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']               # webpack4.x的loader必须写全名
      }
    ]
  },
  plugins: [
    new cleanWebpackPlugin(),            # 执行npm satrt是自动删除dist和build目录
    new htmlWebpackPlugin({                               # 生成html文件
      template: './index.html'
    })
  ]
};

  4、package.json添加script运行

       "start": "webpack-dev-server --color --progress --watch --open --mode development",
       "build": "webpack --colors --progress --mode production"  

5、到此最简单的一个基于webpack的react项目搭建完成，支持本地服务器运行，打包，热加载。

 

6、项目添加ant design UI库

     安装 npm install antd --save

    按需加载（只需从 antd 引入模块即可，无需单独引入样式）：

             先安装 file-loader 组件     

            安装  babel-plugin-import 组件

          babel-loader配置修改为如下：

use: {

     loader: 'babel-loader',

     options: {

              presets: ['es2017', 'react'],

             plugins: [//修改这里的

                                     ["import", {libraryName: "antd", style: "css"}]//修改这里的

                           ] //修改这里的

                      }

               }

 

至此，基于react webpact ant design项目搭建完成