这是一篇很是适合新手的教程。css
目录:html
首先,建立工程目录:前端
mkdir webpack-react-tutorial && cd $_复制代码
建立工程的基础目录结构:node
mkdir -p src复制代码
初始化项目:react
npm init -y复制代码
webpack是一款很是强大的工具,学习webpack不只能够用于搭建React项目,它适用于任何前端工程。webpack
webpack提取原始的React组件,用于生成(几乎)每一个浏览器都能理解的JavaScript代码。
web
安装webpack:npm
npm i webpack --save-dev复制代码
同时须要安装webpack-cli:json
npm i webpack-cli --save-dev复制代码
下一步,在package.json
中添加webpack命令:bootstrap
"scripts": {
"build": "webpack --mode production"
}复制代码
如今你不须要为webpack定义配置文件。
老版本的webpack不会自动查找配置文件,但从webpack4开始,不须要配置文件就能够直接进行开发。
接下来我将安装并配置Babel来编译咱们的代码。
React组件大可能是由ES6语法编写。ES6是对语法的一次很好的改进,但老版本浏览器每每不能解析新的ES6语法。有状态的React组件被生命为class,所以,为了让ES6在旧版浏览器中运行,咱们须要进行某种转换。咱们把这种转换成为编译。
webpack并不知道如何将ES6语法转换为ES5,不过webpack可使用loader来完成。即webpack加载器将一些东西做为输入,并将其转换为其余东西输出。
webpack中的babel-loader便担任着将ES6语法转换为浏览器所能理解语法的工做。
安装依赖:
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev复制代码
不要忘记配置Babel。在工程根目录下建立.babelrc
文件,配置以下:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}复制代码
如今,咱们须要编写一个简短的webpack配置文件。
建立webpack.config.js
文件,配置以下:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};复制代码
对于每一个带有js或jsx扩展名的文件,Webpack经过babel-loader管理代码,将ES6转换为ES5。
有了这个,咱们就能够编写React组件了。
首先按照Container/Presentation原则,建立两个React组件。
容器组件是承载全部逻辑的组件:用于处理状态更改的函数,内部组件状态等。 相反,展现组件仅用于展现。 展现组件是普通的JavaScript函数,它从容器组件接收数据做为props。
下面,我将构建一个简单的带文本框的React表单。
编写代码以前,须要安装React:
npm i react react-dom --save-dev复制代码
接着,建立组件的目录结构:
mkdir -p src/js/components/{container,presentational}复制代码
下面咱们建立容器组件,需知足如下条件:
建立组件:
touch src/js/components/container/FormContainer.jsx复制代码
代码以下:
import React, { Component } from "react";
import ReactDOM from "react-dom";
class FormContainer extends Component {
constructor() {
super();
this.state = {
title: ""
};
}
render() {
return (
<form id="article-form">
</form>
);
}
}
export default FormContainer;复制代码
这个组件目前没有完成任何工做,它只是一个用于包含子组件的框架。
下面建立子组件:
touch src/js/components/presentational/Input.jsx复制代码
咱们的展现组件是一个文本框。一个HTML文本框拥有如下属性:
全部的这些属性都应该由父容器组件传入子组件。
若是input拥有本身的state,在使用时必定要注意,确保HTML input是一个受控的React组件。
安装以下依赖:
npm i prop-types --save-dev复制代码
回到React组件,展现组件代码以下:
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;复制代码
接下来,咱们用容器组件包含这个展现组件:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import Input from "../presentational/Input.jsx";
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;复制代码
webpack默认的入口文件为./src/index.js
。咱们建立这个文件,并在入口文件中引入容器组件FormContainer
import FormContainer from "./js/components/container/FormContainer.jsx";复制代码
而后,咱们就能够执行以下命令进行打包:
npm run build复制代码
打包后的js文件在./dist/main.js
如今让咱们将实现将打包文件引入HTML页面。
要使React form展现出来,咱们必需要让webpack建立一个HTML页面,而且将打包后的js文件引入HTML。
Webpacks须要两个额外的组件来处理HTML:html-webpack-plugin
和html-loader
。
安装依赖:
npm i html-webpack-plugin html-loader --save-dev复制代码
更新webpack配置文件:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};复制代码
建立./src/index.html
文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" >
<title>How to set up React, Webpack, and Babel</title>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-md-4 offset-md-1">
<p>Create a new article</p>
<div id="create-article-form">
<!-- form -->
</div>
</div>
</div>
</div>
</body>
</html>复制代码
最后,将React组件挂在到id为create-article-form
的元素上:
const wrapper = document.getElementById("create-article-form");
wrapper ? ReactDOM.render(<FormContainer />, wrapper) : false;复制代码
再次build:
npm run build复制代码
查看dist
目录,你将会看到HTML结果文件
使用webpack,不须要手动将js文件引入HTML,打包后的文件将会被自动注入。
打开./dist/index.html
,你将会在浏览器中看到刚刚编写的React表单
若是你不想每次改变文件的时候都执行npm run build
来查看结果,使用简单的三行配置就能够启动本地的开发服务器。配置后,webpack将在浏览器中启动应用程序。 此外,每次修改后保存文件webpack服务器都会自动刷新浏览器的窗口。
安装依赖:
npm i webpack-dev-server --save-dev复制代码
更新package.json
:
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
}复制代码
运行命令:
npm start复制代码
你将会在浏览器中看到以下界面:
而且,每次更新文件webpack dev server都会自动刷新页面。
create-react-app是一种开启React项目的方法,几乎全部东西都是开箱即用。但早晚,你都会想要调整或修改一下原有的webpack配置。
若是你学习了如何手动配置React,webpack和Babel,你就能够根据本身的须要从零开始配置React项目。
这些知识对于不须要完整的SPA但仍但愿构建和分发ES6代码的状况也颇有用。 经过组合webpack和Babel,能够将一堆React组件转换为适合分发的bundle。
原文连接:https://www.valentinog.com/blog/react-webpack-babel/