原文: How to Create a React app from scratch using Webpack 4
作者: Linh Nguyen My
译文正文
在过去三个周，我试图从头构建一个React应用以此来熟悉Webpack。我的目标是创建一个简单的webpack配置，将来还能以再扩展。弄清Webpack是一件艰难的事情，不过感谢Valentino Gagliardi的教程，给了我很大的启发。
我计划做一个搜索功能，数据来源于假的JSON文件。在这篇文章里，我将详细阐述我是如何建立我这个项目的。在下一篇里，我将谈到如何写测试。我也想用Node.js做为此项目的服务器，不过目前还不能确定这是否超出此项目需要。
(注意：我在文章结尾提供了本项目Webpack的详细配置)
好了，那我们开始吧！
创建一个新项目，并cd进入。
$ mkdir react_search
$ cd react_search
创建package.json文件:
$ npm init
如果你想跳过初始化时的问题，加上 -y:
$ npm init -y
我们需要安装webpack的开发依赖，同时安装webpack-cli以便在命令行使用webpack.
$ npm i webpack webpack-cli -D
- i: install
- -D:-- save-dev
创建名为src的目录，并在src里新建index.js，并贴上如下代码：
console.log("hello");
接下来在package.json里加入代码 (script里)：
{
"name": "react_search",
"version": "1.0.0",
"description": "Search app using React",
"main": "index.js",
"scripts": {
"start": "webpack --mode development",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.0.1",
"webpack-cli": "^2.0.10"
}
}
Webpack4有两种模式，development和production，代码在后面将会被压缩。
执行看效果：
$ npm run start
此命令执行完毕你会看到新增了一个dist目录，里面有一个main.js文件。
如果你执行：
$ npm run build
你将会看到如下结果：
安装 React 和 Babel
如果要使用React，我们必须同时安装Babel。Babel将ES6语法转换成ES5，因为不是所有浏览器都支持ES6（比如IE）
安装react和react-dom依赖：
$ npm i react react-dom -S
- -S:-- save
接下来安装babel-core, babel-loader, babel-preset-env 和 babel-preset-react作为开发依赖（dev dependency）。
$ npm i babel-core babel-loader babel-preset-env babel-preset-react -D
- babel-core: 将ES6转换程ES5
- babel-loader: Webpack工具，帮助你用Babel转换Javascript依赖（例如，当你在一个组件里import另一个组件）
- babel-preset-env: 决定使用什么插件或转换工具（为老旧浏览器提供polyfill。）
- babel-preset-react: 为所有React插件所用的Babel的预先设置工具，比如将JSX转换成函数（方法）。
我们需要创建webpack.config.js文件，配置我们的babel-loader规则。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
我们还需要创建.babelrc文件，配置babel-loader选项。你可以将.babelrc的内容直接写到webpack.config.js文件里，不过我看很多项目都是将这两者分开写，这样可读性更强，而且和webpack不相干的工具也可以使用这个配置。当你在webpack.config.js里配置了babel-loader，它就会去找项目里是否有.babelrc这个文件。
{
"presets": ["env", "react"]
}
接下来，改写你的index.js文件，渲染一个组件：
import React from "react";
import ReactDOM from "react-dom";
const Index = () => {
return Hello React!;
};
ReactDOM.render(与此同时，我们需要在src目录下创建一个index.html文件，在其中增加带有id的DOM元素，在这个元素里渲染react组件。
React and Webpack4
安装html-webpack-plugin，并在webpack.config.js中配置该插件。该插件生成一个内嵌