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项目搭建完成