第一次尝试,把过程记录下来,后续遇到坑再来修改博客
首先第一步初始化项目
先给项目创建一个文件夹 webpack-react
mkdir webpack-react
cd webpack-react
然后创建一个src文件夹
mkdir -p src
初始化项目
yarn init -y
然后安装配置webpack
首先安装(也可以用npm i 代替 yarn add)
yarn add webpack --save-dev
yarn add webpack-cli --save-dev
初始化babel
安装react项目大多都是es6语法,这个时候就需要安装babel来转译成es5
babel-loader需要利用Babel,所以需要预先将Babel配置好。
babel preset env:将ES6的代码转成ES5(注意:babel-preset-es2015已经被废弃了)
yarn add @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
安装来babel还要在根目录下新建一个.babelrc文件,内容为
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
这个时候一小部分配置文件算是配置好了
现在继续在根目录下创建一个webpack.config.js文件,配置打包路径及其他,文件内容为
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
这个配置文件的意思就是把js结尾的文件都会通过babel-loader把es6编译转化成es5的文件,同时定义了输入文件的路径为src/index.js,输出为dist/bundle.js。
下面开始写react组件
首先需要安装react
yarn add react react-dom --save-dev
然后在src下面创建两个文件夹写react组件代码
mkdir -p src/js/components/{container,presentational}
然后我们自己写一个容器组件和一个子组件
创建两个js文件
touch src/js/components/container/FormContainer.js
touch src/js/components/presentational/Input.js
FormContainer作为容器组件 代码如下:
import React, { Component } from "react";
class FormContainer extends Component {
constructor() {
super();
this.state = {
};
}
render() {
return (
<form id="article-form">
</form>
);
}
}
export default FormContainer;
子组件Input.js代码如下:
写react组件,可以加上Prop Types,用来对数据类型检测
yarn add prop-types --save-dev
import React from "react";
import PropTypes from "prop-types";
const Input = ({ label, text, type, id, value, handleChange }) => (
<div className="form-group">
<label htmlFor={label}>{text}</label>
<input
type={type}
className="form-control"
id={id}
value={value}
onChange={handleChange}
required
/>
</div>
);
Input.propTypes = {
label: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
type: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
handleChange: PropTypes.func.isRequired
};
export default Input;
接着开始渲染这个input子组件
FormContainer.js代码如下:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Input from "../presentational/Input";
class FormContainer extends Component {
constructor() {
super();
this.state = {
seo_title: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ [event.target.id]: event.target.value });
}
render() {
const { seo_title } = this.state;
return (
<form id="article-form">
<Input
text="SEO title"
label="seo_title"
type="text"
id="seo_title"
value={seo_title}
handleChange={this.handleChange}
/>
</form>
);
}
}
export default FormContainer;
组件写好之后,现在可以开始考虑打包了。
创建一个js文件 src/index.js 代码如下:
import ReactDOM from "react-dom";
import FormContainer from "./js/components/container/FormContainer";
export default ReactDOM.render(<FormContainer />, document.getElementById("root");)
在html文件引入bundle
为了展示我们的React组件,我们需要让webpack生成一个html文件。上面我们生成的bundle.js就会放在这个html文件的script
标签里。
webpack需要两个工具来生成这个html文件:html-webpack-plugin跟html-loader
yarn add html-webpack-plugin html-loader --save-dev
然后更新webpack的配置文件
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
title: 'Set Up Project',
filename: "./index.html"
})
]
};
在package.json文件加上打包命令
"scripts": {
"build": "webpack"
}
现在在终端执行yarn build 项目就能成功打包了
打包完之后还剩最后一步
在打包出来的index.html里面body加一个div标签 id:root
为什么呢?
因为在上面index.js文件里面
export default ReactDOM.render(<FormContainer />, document.getElementById("root");)
这条代码指定了将模版放到root里面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Set Up Project</title>
</head>
<body>
<div id='root'>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
这样一个简单手动搭建的react项目就完成了~