-
从Git上新建一个项目demo (或者从本地新建一个demo文件夹);
-
在demo文件夹下,打开cmd(或者Git Bash),安装react:
npm i react react-dom
- 安装webpack及相关
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader
webpack-dev-server:实现热更新;
html-webpack-plugin:实现自动将打包好的文件注入到页面;
如果使用less进行开发可以加上"less less-loader";
4. 安装babel,将高级语法转换成es5
npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader
其中@babel/core是babel的核心模块,包含了babel的核心功能; @babel/preset-env支持转换ES6以及更新的js语法,并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码;@babel/preset-react包含了babel转换react所需要的plugin;babel-loader是webpack的babel加载器。
5. 搭建项目结构
在demo文件夹下,新建main.js入口文件,新建src文件夹(-index.html,components/Test.js+Test.less),新建.babelrc文件和.gitignore文件;
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
main.js:
import React from 'react';
import ReactDom from 'react-dom';
import Test from './src/components/Test.js';
ReactDom.render(<Test />,document.getElementById('root'))
.babelrc:
{
"presets":[
"@babel/preset-env",
"@babel/preset-react",
]
}
.gitignore:
# Dependency directories
node_modules/
/.git
- 配置webpack
在demo文件夹下新建webpack.config.js文件:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry:'./main.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/, //排除依赖
use:'babel-loader'
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.less$/,//不要忘记css-loader
use:['style-loader','css-loader','less-loader']
}
]
},
plugins:{
new HtmlWebpackPlugin({
template:'./src/index.html'
)
}
}
- 配置package.json
与devDependencies平级添加:
"scripts":{
"dev":"webpack-dev-server --mode development --open --hot",
"build":"webpack --mode production"
}
- 启动项目npm run dev
- 构建项目npm run build
- 完成。
完整项目Git地址:https://github.com/Sev1/demo.git