手动使用webpack搭建react项目

 

第一次尝试，把过程记录下来，后续遇到坑再来修改博客

 

首先第一步初始化项目

先给项目创建一个文件夹 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项目就完成了～