本文详细介绍了如何使用create-react-app创建React项目，包括设置Babel、编写React组件、配置HTML webpack插件、使用webpack 4提取CSS到单独文件，以及启用webpack dev server实现热加载。通过这些步骤，读者可以掌握React应用的基础构建流程。
参考自：
https://www.html.cn/archives/9427
创建项目
第一步：安装，如果安装失败或者报警，可以尝试更换npm registry的地址，比如设置为淘宝源或者你所在公司可以翻墙的源。npm config set registry="https://"
npm i -g create-react-app
第二步：创建项目，并进入
create-react-app my-app
cd my-app
//推荐下面每个都试着运行下
yarn start
yarn build
yarn eject
其中最后的yarn eject会使得隐藏的webpack.config.js文件出现在文件夹config里面。
设置Babel
react components(组件) 大多是用 JavaScript ES6 编写的。
由于浏览器无法理解 React 组件，因此需要进行某种转换。
Webpack 不知道如何进行转换，但它具有 loaders(加载器) 的概念：将它们视为转换器。
Webpack loaders(加载器) 将某些内容作为输入并生成其他内容作为输出。
babel-loader 是 Webpack 加载器，负责接收 ES6 代码并使其可以让所选择的浏览器理解。
很明显 babel-loader 使用 Babel。 并且 Babel 必须配置为使用一组预设：
babel-preset-env 用于将 JavaScript ES6 代码编译为 ES5（请注意，babel-preset-es2015现已弃用）
babel-preset-react 用于将 JSX 和其他东西编译到 JavaScript
要开始使用 loader ，我们需要安装一堆依赖项。 尤其是：
- babel-core
- babel-loader
babel-preset-env 用于将 Javascript ES6 代码编译为 ES5
我们开始动手吧：
CommandLine 代码:
npm i babel-core babel-loader babel-preset-env --save-dev
接下来，通过在项目文件夹中创建名为 .babelrc 的新文件来配置 Babel ：
.babelrc 代码:
{
"presets": [
"env"
]
}
此时我们有2个配置 babel-loader 的选项：
使用 webpack 的配置文件
在你的 npm scripts 中使用 --module-bind
给 webpack 添加一个配置文件，以最经典的方式使用 babel-loader。
创建一个名为 webpack.config.js 的新文件并配置 loader(加载器) ：
webpack.config.js 代码:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
除非您要自定义 entry point(入口点) ，否则无需指定它。
接下来打开 ./src/index.js 并编写一些 ES6 代码：
index.js 代码:
const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;
最后，创建 bundle(包)：
CommandLine 代码:
npm run build
现在看一下 ./dist/main.js 来查看转换后的代码。
此时我们已准备好定义最小的webpack配置。
创建一个名为 webpack.config.js 的文件，写入以下内容：
webpack.config.js 代码:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
配置非常简单。
对于每个扩展名为 .js 的文件，Webpack 都会通过 babel-loader 来管理代码，将 ES6 转换为 ES5 。
有了这个，我们就可以编写我们的 React 组件了。
编写react
一旦你安装并配置了 babel ，这里就很容易了。
安装 React ：
CommandLine 代码:
npm i react react-dom --save-dev
接下来添加 babel-preset-react ：
CommandLine 代码:
npm i @babel/preset-react --save-dev
在 .babelrc 中配置预设：
.babelrc 代码:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
很快就完成了！
根据 Conner Aiken 的建议，您可以配置 babel-loader 来读取 .jsx 文件。 如果你的 React 组件 正在使用 jsx 扩展，这将非常有用。
打开 webpack.config.js 并像这样配置 loader(加载器) ：
webpack.config.js 代码:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
要测试一下你可以在 ./src/App.js 中创建一个测试的 React 组件：
App.js 代码:
import React from "react";
import ReactDOM from "react-dom";
const App = () => {
return (
<div>
<p>React here!</p>
</div>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById("app"));
接下来在 ./src/index.js 中 import(导入) 组件：
index.js 代码:
import App from "./App";
然后再次运行构建 npm run build
HTML webpack 插件
webpack 需要两个额外的组件来处理HTML：html-webpack-plugin 和 html-loader。
添加依赖项：
CommandLine 代码:
npm i html-webpack-plugin html-loader --save-dev
然后更新 webpack 配置：
webpack.config.js 代码:
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",
options: { minimize: true }
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
接下来在 ./src/index.html 中创建一个 HTML 文件：
index.html 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webpack 4 quickstart</title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
然后再次运行构建：
CommandLine 代码:
npm run build
并查看 ./dist 文件夹。 您应该看到生成的 HTML 。
没有必要在 HTML 文件中引入您的 Javascript ：bundle(包) 会自动注入。
在浏览器中打开 ./dist/index.html ：您应该看到 React 组件正常工作！
正如您所看到的，在处理 HTML 方面没有任何改变。
webpack 4 仍然是一个针对 Javascript 的模块打包器。
但是有计划将 HTML 添加为模块（HTML作为 entry point(入口点)）。
webpack 4：将 CSS 提取到一个文件中
webpack 不知道如何将 CSS 提取到一个文件中。
在过去，这是 extract-text-webpack-plugin 的工作。不幸的是，这个插件与 webpack 4 不太兼容。根据 Michael Ciniawsky 的说法：extract-text-webpack-plugin 的维护已经成为了一个很大的负担，这已经不是第一次因为它的问题，而使升级 webpack 主版本变的而复杂和繁琐
mini-css-extract-plugin 可以解决这些问题。
注意：确保将 webpack 更新到 4.2.0 版。 否则 mini-css-extract-plugin 将无效！
使用以下命令安装该插件和 css-loader ：
CommandLine 代码:
npm i mini-css-extract-plugin css-loader --save-dev
接下来创建一个用于测试的 CSS 文件：
css 代码:
/* */
/* CREATE THIS FILE IN ./src/main.css */
/* */
body {
line-height: 2;
}
配置插件和 loader(加载器)：
webpack.config.js 代码:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
options: { minimize: true }
}
]
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
最后在 entry point(入口点) import(导入) CSS：
index.js 代码:
//
// PATH OF THIS FILE: ./src/index.js
//
import style from "./main.css";
然后再次运行构建：
CommandLine 代码:
npm run build
并查看 ./dist 文件夹。你应该看到生成的CSS！
回顾一下：extract-text-webpack-plugin 不适用于webpack 4 。请改用 mini-css-extract-plugin 代替。
webpack 4：webpack dev server
使用 webpack 配置开发服务器只需一分钟。
配置好的 webpack dev server 将在浏览器中启动您的应用程序。
每次更改文件时，它都会自动刷新浏览器的窗口。
要设置 webpack dev server，请安装包：
CommandLine 代码:
npm i webpack-dev-server --save-dev
接下来打开 package.json 并调整 scripts ，如下所示：
package.json 代码:
"scripts": {
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}
保存并关闭文件。
现在，通过运行以下命令：
CommandLine 代码:
npm run start
你会看到 webpack dev server 在浏览器中启动你的应用程序。
webpack dev server 非常适合开发。 （它也可以使 React Dev Tools 在您的浏览器中正常工作）。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
