感谢原文链接 https://www.valentinog.com/blog/react-webpack-babel/
源码 可以查看github地址 https://github.com/rayyuan90/webpack-with-react-
目录
如何建立React，的WebPack和Babel：你将学到什么
如何建立React，的WebPack和Babel：设立的WebPack
如何建立React，的WebPack和Babel：建立Babel
如何建立React，的WebPack和Babel：写作React的组分
如何建立React，的WebPack和Babel：在HTML的WebPack插件
如何建立React，的WebPack和Babel：的WebPack开发服务器
如何建立React，的WebPack和Babel：你将学到什么
如何安装和配置的WebPack
如何安装和配置通天塔
如何安装阵营
如何创建两个按照集装箱/表象原则React的组分
如何将得到的束到HTML页面
如何安装和配置的WebPack开发服务器
应对不限于完全成熟的SPA。这是可能的库集成到任何现有的网站。
React可以在任何一个CDN或一个模块捆绑拉。
对于大多数我的项目我使用的WebPack：结合React，是的WebPack容易，因为一件轻而易举的事。
你可以这样做，有一个工作的WebPack 4 -在几分钟内做出React的环境：这里是给你一个简短的教程。
如何建立 react，WebPack和Babel：建立项目
通过创建项目的目录开始：mkdir webpack-react-tutorial && cd webpack-react-tutorial
用于固定代码创建一个最小的目录结构：mkdir -p src
Inizialize通过运行项目：npm init -y
开始吧。
如何建立React，WebPack和Babel的项目
WebPack是现代Web发展的支柱之一。这是一个令人难以置信的强大的工具。
如何使用的WebPack是与React工作的根本。
WebPack摄取原React的组分用于生产JavaScript代码（几乎）所有浏览器都能理解。
让我们通过运行安装：npm i webpack --save-dev
您还需要 WebPack-CLI 运行npm~命令：npm i webpack-cli --save-dev
接下来在添加 webpack命令 到 package.json：
"scripts": {
"build": "webpack --mode production"
}
在这一点上，没有必要定义配置文件的WebPack。
年长的WebPack的版本并自动寻找的配置文件。
以来第4版已不再的情况下：您可以开始开发straigh了。
在下一节中，我们将安装和transpiling我们的代码配置通天塔。
如何建立React，的WebPack和Babel：建立Babel
React的组分大多以JavaScript写成ES6。
因为他们去那里是需要某种变换的浏览器不能理解React的组分。
的WebPack不知道如何进行转型，但它有装载机的概念：认为他们作为变压器。
一的WebPack装载机需要的东西作为输入，并产生别的东西作为输出。
巴贝尔装载机Babel装载机是的WebPack装载机负责获取在ES6代码，使之理解的首选浏览器。
ObsviuslyBabel-loaderbabel-loadermakes使用通天。而Babel必须配置为使用一串预设的：
Babel preset ENV 编译的Javascript代码ES6下降到ES5（请注意，Babel预设-ES2015现在已经过时）
Babel preset React 编译JSX和其他的东西下来的Javascript
让我们把与依赖关系 dependencies 加入项目 执行：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$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
配置是相当简单的。
对于具有.js.jsextension的WebPack管道通过通天塔- loaderbabel加载器的代码转化器ES6下降到ES5每个文件。
有了这个地方，我们已经准备好写我们的React的组分。
让我们头以上下一节。
如何建立React，的WebPack和Babel：写作React的组分
我喜欢写我按照集装箱/表象原则React的组分。
我建议考虑看看容器组件和聪明和愚蠢的组件由丹·阿布拉莫夫学习更多。
总之，集装箱/表象原则是React的组分的模式。
该容器组件是携带所有的逻辑的一个：用于处理状态的变化，内部组件状态等的功能。
在对比度的表象的部件仅仅是用于显示所期望的标记。表象组分通常是纯箭头功能和从所述容器部件作为接收数据道具。
你会看到他们是怎么看起来像下面的例子。
对于这个职位的范围，我想建立一个超级简单的形式做出React具有单个文本输入。
触摸之前的任何代码，让我们在运行：
npm i react react-dom --save-dev
然后创建组织的组件最小目录结构：
mkdir -p src/js/components/{container,presentational}
接下来，让我们创建一个容器组件：
有它自己的状态
渲染HTML表单
创建组件到SRC / JS /组件/容器/ SRC / JS /组件/容器/：
触摸的src / JS /组件/容器/ FormContainer.js
触摸的src /
JS /组件/容器/ FormContainer.js
触摸的src / JS /组件/容器/ FormContainer.js
该组件将如下所示：
进口反应，{元器件}从“反应”;
从 “反应-DOM” 进口ReactDOM;
类FormContainer延伸元器件{
构造（）{
超（）;
this.state = {
标题：“”
};
}
渲染（）{
返回（
<表格ID =“文章形式”>
）;
}
}
出口默认FormContainer;
进口React，{元器件}从“React”;
进口 ReactDOM从“React-DOM”;
类 FormContainer扩展组件{
构造（）{
超（）;
this.state= {
标题：“”
};
}
渲染（）{
返回（
<表格ID =“文章形式”>
</形式>
）;
}
}
出口默认FormContainer;
进口反应，{元器件}从“反应”;
从 “反应-DOM” 进口ReactDOM;
类FormContainer延伸元器件{
构造（）{
超（）;
this.state = {
标题：“”
};
}
渲染（）{
返回（
<表格ID =“文章形式”>
）;
}
}
出口默认FormContainer;
该组件什么也不做，在这一刻。它只是结束了子组件的骨架。
实际上，如果没有它的表象子容器组件几乎是无用的。
让我们来解决这个问题。
创建的src / JS /组件/表象/ src目录中的新组件/ JS /组件/表象/：
触摸的src / JS /组件/表象/ Input.js
触摸的src /
JS /组件/表象/ Input.js
触摸的src / JS /组件/表象/ Input.js
我们的第一个表象作出React组件将是一个文字输入。我们知道，一个HTML输入采用以下属性：
类型
类
ID
值
需要
所有这些都将成为道具，容器组件将传承给其表象的孩子。
由于输入拥有自己的状态，我们必须确保阵营将照顾它。一个HTML输入变为在阵营控制的部件。
说起道具，这是很好的做法与记录您的React的组分道具类型。
通过运行安装包：
NPM我丙种--save-dev的
NPM我丙种--save-dev的
NPM我丙种--save-dev的
回React，我们的表象成分为HTML的输入将如下所示：
进口从“反应”反应;
从“道具类型”进口PropTypes;
常量输入=（{标签，文本，类型，识别符，值，handleChange}）=>（
<标签htmlFor = {标签}> {文本} </标签>
<输入
类型= {}类型
类名=“形式控制”
ID = {ID}
值= {}值
的onChange = {handleChange}
需要
/>
）;
Input.propTypes = {
标签：PropTypes.string.isRequired，
文本：PropTypes.string.isRequired，
类型：PropTypes.string.isRequired，
ID：PropTypes.string.isRequired，
值：PropTypes.string.isRequired，
handleChange：PropTypes.func.isRequired
};
出口默认输入;
进口从“React”React;
进口从“道具类型” PropTypes;
常量输入=（{标签，文本，类型，识别符，值，handleChange}）=>（
<格的className =“形式的基团”>
<标签htmlFor = {标签}> {文本} </标签>
<输入
类型= {}类型
类名=“形式控制”
ID = {ID}
值= {}值
的onChange = {handleChange}
需要
/>
</DIV>
）;
Input.propTypes = {
标签：PropTypes.string.isRequired，
文本：PropTypes.string.isRequired，
类型：PropTypes.string.isRequired，
ID：PropTypes.string.isRequired，
值：PropTypes.string.isRequired，
handleChange：PropTypes.func.isRequired
};
出口默认的输入;
进口从“反应”反应;
从“道具类型”进口PropTypes;
常量输入=（{标签，文本，类型，识别符，值，handleChange}）=>（
<标签htmlFor = {标签}> {文本} </标签>
<输入
类型= {}类型
类名=“形式控制”
ID = {ID}
值= {}值
的onChange = {handleChange}
需要
/>
）;
Input.propTypes = {
标签：PropTypes.string.isRequired，
文本：PropTypes.string.isRequired，
类型：PropTypes.string.isRequired，
ID：PropTypes.string.isRequired，
值：PropTypes.string.isRequired，
handleChange：PropTypes.func.isRequired
};
出口默认输入;
在这一点上，我们就可以更新我们的容器组件，包括文本输入：
进口反应，{元器件}从“反应”;
从 “反应-DOM” 进口ReactDOM;
从“../presentational/Input”进口输入;
类FormContainer延伸元器件{
构造（）{
超（）;
this.state = {
seo_title：“”
};
this.handleChange = this.handleChange.bind（本）;
}
handleChange（事件）{
this.setState（{[event.target.id]：event.target.value}）;
}
渲染（）{
常量{seo_title} = this.state;
返回（
<表格ID =“文章形式”>
<输入
文字=“搜索引擎优化称号”
标签= “seo_title”
类型=“文本”
ID = “seo_title”
值= {seo_title}
handleChange = {this.handleChange}
/>
）;
}
}
出口默认FormContainer;
进口React，{元器件}从“React”;
进口 ReactDOM从“React-DOM”;
进口从“../presentational/Input”输入;
类 FormContainer扩展组件{
构造（）{
超（）;
this.state= {
seo_title：“”
};
this.handleChange =
this.handleChange.bind（本）;
}
handleChange（事件）{
this.setState（{ [event.target.id]：event.target.value}）;
}
渲染（）{
常量{seo_title} = this.state;
返回（
<表格ID =“文章形式”>
<输入
文字=“搜索引擎优化称号”
标签= “seo_title”
类型=“文本”
ID = “seo_title”
值= {seo_title}
handleChange = {this.handleChange}
/>
</形式>
）;
}
}
出口默认FormContainer;
进口反应，{元器件}从“反应”;
从 “反应-DOM” 进口ReactDOM;
从“../presentational/Input”进口输入;
类FormContainer延伸元器件{
构造（）{
超（）;
this.state = {
seo_title：“”
};
this.handleChange = this.handleChange.bind（本）;
}
handleChange（事件）{
this.setState（{[event.target.id]：event.target.value}）;
}
渲染（）{
常量{seo_title} = this.state;
返回（
<表格ID =“文章形式”>
<输入
文字=“搜索引擎优化称号”
标签= “seo_title”
类型=“文本”
ID = “seo_title”
值= {seo_title}
handleChange = {this.handleChange}
/>
）;
}
}
出口默认FormContainer;
时间连线的事情了。
预计的WebPack切入点是./src/index.js./src/index.js
创建./src/index.js./src/index.jsand放置一个import指令到它需要容器组件：
进口FormContainer从“./js/components/container/FormContainer”;
进口 FormContainer从“./js/components/container/FormContainer”;
进口FormContainer从“./js/components/container/FormContainer”;
有了这个地方，我们已经准备好运行创造我们的包：
NPM运行构建
NPM运行构建
NPM运行构建
给的WebPack第二，看包来的生活！
束将被放置到
./dist/main.js
./dist/main.js
./dist/main.js
现在，让我们把我们做出React的实验生活由包括捆绑到HTML页面。
如何建立React，的WebPack和Babel：在HTML的WebPack插件
为了显示我们的形式作出React，我们必须告诉的WebPack生成一个HTML页面。将所得的束将放在一个<SCRIPT> </
SCRIPT> <SCRIPT> </ SCRIPT>标记内。
Webpacks需要处理HTML另外两个组成部分：HTML-的WebPack-插件和HTML装载机。
添加依赖与：
NPM我的HTML的WebPack-插件HTML装载机--save-dev的
NPM我的HTML的WebPack-插件HTML装载机--save-dev的
NPM我的HTML的WebPack-插件HTML装载机--save-dev的
然后更新的WebPack配置：
常量HtmlWebPackPlugin =需要（ “HTML-的WebPack-插件”）;
module.exports = {
模块：{
规则：
{
测试：/\.js$/，
排除：/ node_modules /，
使用：{
装载机：“巴别塔装载机”
}
}，
{
测试：/\.html$/，
使用：[
{
装载机：“HTML装载机”
}
]
}
]
}，
插件：
新HtmlWebPackPlugin（{
模板：“./src/index.html”
文件名：“./index.html”
}）
]
};
常量 HtmlWebPackPlugin =需要（ “HTML-的WebPack-插件”）;
module.exports = {
模块：{
规则：
{
测试：/\.js$/，
排除：/
node_modules /，
使用：{
装载机：“巴别塔装载机”
}
}，
{
测试：/\.html$/，
使用：[
{
装载机：“HTML装载机”
}
]
}
]
}，
插件：
新 HtmlWebPackPlugin（{
模板：“./src/index.html”
文件名：“./index.html”
}）
]
};
常量HtmlWebPackPlugin =需要（ “HTML-的WebPack-插件”）;
module.exports = {
模块：{
规则：
{
测试：/\.js$/，
排除：/ node_modules /，
使用：{
装载机：“巴别塔装载机”
}
}，
{
测试：/\.html$/，
使用：[
{
装载机：“HTML装载机”
}
]
}
]
}，
插件：
新HtmlWebPackPlugin（{
模板：“./src/index.html”
文件名：“./index.html”
}）
]
};
接下来reate一个HTML文件到./src/index.html./src/index.html(feel自由使用你喜欢的任何CSS库）：
<！DOCTYPE HTML>
<HTML语言= “EN”>
<元的charset = “UTF-8”>
<链路的rel = “样式表的” href = “https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css”>
如何设置反应，的WebPack，和巴别</ TITLE>
创建一个新的文章
<！ - 表- >
<！DOCTYPE HTML>
<HTML 郎= “EN”>
<HEAD>
<元字符集= “UTF-8”>
<链接的rel = “样式表的” href = “https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css”>
<TITLE>如何建立React，的WebPack和Babel
</ HEAD>
<BODY>
<DIV 类=“容器”>
<DIV 类= “行MT-5”>
<DIV 类= “COL-MD-4偏移-MD-1”>
<P>创建一个新的文章
<DIV ID = “创建-文章形式”>
<！ - 表 -
>
</ DIV>
</ DIV>
</ DIV>
</ DIV>
</ BODY>
</ HTML>
<！DOCTYPE HTML>
<HTML语言= “EN”>
<元的charset = “UTF-8”>
<链路的rel = “样式表的” href = “https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css”>
如何设置反应，的WebPack，和巴别</ TITLE>
创建一个新的文章
<！ - 表- >
最后一件事是失踪了！我们要告诉我们的阵营组件本身挂钩到<DIV ID = “创建-文章形式”> </ DIV> <DIV ID = “创建-文章形式”> </ div>上。
打开./src/js/components/container/FormContainer.js./src/js/components/container/FormContainer.jsand添加以下的文件的底部：
常量包装=的document.getElementById（ “创建-物品形式”）;
包装器？ReactDOM.render（<FormContainer />，包装器）：假;
常量包装=的document.getElementById（ “创建-物品形式”）;
包装器？ReactDOM.render（<FormContainer />，包装器）：假;
常量包装=的document.getElementById（ “创建-物品形式”）;
包装器？ReactDOM.render（<FormContainer />，包装器）：假;
关闭并保存文件。
现在再次运行编译：
NPM运行构建
NPM运行构建
NPM运行构建
看一看在./dist./distfolder。你应该可以看到生成的HTML。
随着的WebPack有没有需要包括在HTML文件中你的Javascript：捆绑将被自动注入到该页面。
打开./dist/index.html./dist/index.htmlin您的浏览器：你应该看到的作出React形式。
如何建立React，的WebPack和Babel：的WebPack开发服务器
你不想打字NPM运行buildnpm运行更改文件buildevery时间。
只需3配置的线路有一个开发服务器运行起来。
一旦配置的WebPack将推出浏览器中您的应用程序。
此外，每次保存修改的WebPack WEV服务器后的文件将自动地刷新浏览器窗口。
要设置的WebPack dev的服务器安装软件包：
NPM我的WebPack-DEV-服务器--save-dev的
NPM我的WebPack-DEV-服务器--save-dev的
NPM我的WebPack-DEV-服务器--save-dev的
打开package.jsonpackage.jsonto加入启动脚本：
“脚本”：{
“开始”： “的WebPack-DEV-服务器--open --mode发展”，
“建”： “的WebPack”
}
“脚本”：{
“开始”： “的WebPack-DEV-服务器--open --mode发展”，
“建立”： “的WebPack”
}
“脚本”：{
“开始”： “的WebPack-DEV-服务器--open --mode发展”，
“建”： “的WebPack”
}
保存并关闭文件。
现在，通过运行：
NPM启动
NPM启动
NPM启动
你应该看到的WebPack启动浏览器内你的应用程序。
的WebPack开发服务器将自动地在每次修改文件刷新窗口！
如何建立React，的WebPack和Babel：结束了
React大多用于创建单页的应用程序。但它也可以装到任何网站。
通过组合的WebPack和巴别能够一堆React的组分变换成适合于被分发束。
在上述指南中，我们已经看到：
如何安装和配置的WebPack
如何安装和配置通天塔
如何安装阵营
如何创建两个按照集装箱/表象原则React的组分
如何将得到的束到HTML页面
如何安装和配置的WebPack开发服务器
截至去年底，你应该能够从头与React，以及的WebPackBabel开始。
为了更多地了解的WebPack退房的WebPack 4教程，从零到CONF生产模式。
谢谢阅读！
原文
教程：如何建立反应，4的WebPack和巴贝尔7（2018）
提供更好的翻译建议
网友评论