原文: 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 <div>Hello React!</div>;
};
ReactDOM.render(<Index />, document.getElementById("index"));
与此同时，我们需要在src目录下创建一个index.html文件，在其中增加带有id的DOM元素，在这个元素里渲染react组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
</head>
<body>
<section id="index"></section>
</body>
</html>
安装html-webpack-plugin，并在webpack.config.js中配置该插件。该插件生成一个内嵌<script>的HTML文件，并将该文件写入到dist/index.html中。
安装html-webpack-plugin作为开发依赖：
$ npm i html-webpack-plugin -D
像如下这样更新webpack config：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
},
plugins: [htmlPlugin]
};
你也可以这样写配置：
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
]
但我更喜欢变量的形式，这样我就能对使用的插件一目了然。
template对应的值表示我在哪里去找HTML文件。filename对应的值表示在dist目录中生成的HTML文件的文件名。
现在执行npm run start，你会看见dist目录里生成了index.html。
打开dist/index.html你会在浏览器中看到“Hello React”字样。
安装 webpack-dev-server
如果每次更改了文件内容，想在浏览器里看更新，都需要重新执行上述命令，这未免太繁琐。我们用webpack-dev-server 模块，可以让webpack自动监测你任何组件内代码的修改，并自行刷新网页。
安装webpack-dev-server为开发依赖：
$ npm i webpack-dev-server -D
改写package.json：
{
"name": "react_search",
"version": "1.0.0",
"description": "Search app using React",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.0.6",
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
}
}
执行npm run start，默认浏览器打开了url地址为localhost:8080的网页，这就是--open的作用。现在，你每改一处代码，浏览器就会自行刷新。
你也可以在启动命令npm run start上加上--hot，这个命令会让浏览器只刷新你更改的组件部分，而不会刷新整个网页。这就是Hot Module Replacement
配置 CSS
最后一部分讲述的是如何配置CSS。在我们的React组件里我们要导入CSS文件，所以我们需要用到css-loader模块来解析它们。一旦解析成功，我们还需要用style-loader将css添加到DOM中——HTML文件<head>下的<style>标签里。
添加开发依赖：
$ npm i css-loader style-loader -D
修改webpack.config.js：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [htmlWebpackPlugin]
};
注意，这里添加loaders的顺序很重要。首先，我们需要解析css文件，然后再通过style-loader将其加入到DOM中。wepack默认按照从右（数组中最后一个元素）到左（数组中第一个元素）的顺序使用loader。
模块化CSS
webpack还可以将CSS模块化，即class名称将根据不同组件进行隔离。
为了实现模块化，我们给css-loader增加一些选项：
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlWebpackPlugin]
};
为了设置选项，我们将loader写成了object形式。将module设置成true，使之支持CSS模块化。importLoaders则定义了在css-loader之前需要加载的loaders数量。例如，sass-loader就需要在css-loader之前加载。
localIdentName选项是为了设置生成的class标识。
- [name] component的名字
- [local] class/id的名称
- [hash:base64] 随机生成的CSS hash字符串，每一个component的hash值不一样。
为了更直观，我举个例子。比如我有一个叫Form的component，里面button的class名为primaryButton。与此同时我有另外一个叫Search的component，里面button的class名也为primaryButton。但是这俩class的css值却不一样：
Form button
.primaryButton {
background-color: green;
}
Search button
.primaryButton {
background-color: blue;
}
当webpack将你应用打包后，后一个出现的同名css样式将会污染前一个。在这个例子中，你的两个按钮都会是绿色或着蓝色，没有达到预期目标。
这时localIdentName就显得意义重大了。有了它，在你用webpack打包时，你的两个按钮都会拥有唯一的class名称。
如图所示，Form组件和Search组件里按钮的class名不相同。该class名由组件名、class名、唯一hash字符串组成。
因此，你就不必担心不同组件里会由相同的class名称——你只需要注意同一组件里的class命名即可。
好了，这里就是“如何从头开始创建React应用”的第一部分了。
希望有所帮助！
