2.1 采用 create react app 编写
create-react-app 项目 [[点击前往 Github]](https://github.com/facebook/c… 是 facebook 推出的入门初始化项目，适合新手第一次使用，无需进行各种配置，完美的实现了开箱即用理念。
2.1.1 建立项目
npx create-react-app my-app
cd my-app
npm start
npx 命令是 npm 在 5.x 版本之后推出的一个增强功能，它帮助开发者可以临时下载项目进行执行之后，会自动删除这个临时下载的项目。不会在全局项目中生成文件。
上面的命令，表示，下载 create-react-app 项目，并且运行这个项目，在 my-app 目录中创建新项目。
2.1.2 运行项目
创建完成之后，进入 my-app 目录。执行 npm 语句，进行本地开发预览。
我们进入这个创建好的文件夹 my-app, 执行 npm run start 即可进入本地开发预览了。
如图所示，我们已经在本地端口 3000 上运行了这个程序。快打开你的浏览器查看一下吧。
2.2 手动配置 webpack 编写
这个章节有点超纲，有兴趣的同学可以仔细阅读一下。这一节是针对有兴趣深入了解的同学的，如果你现在一下子还是无法理解这些知识，建议后面再来回顾。
2.2.1 建立项目
我们首先创建一个 webpack-app 文件夹。然后使用 VS Code 打开这个目录。使用 Ctrl+~ 键打开控制台，如果无法打开说明热键已经被占用了。点击菜单的 查看 -> 终端。
第一步先输入 npm init 建立前端项目的配置文件。
直接一路回车到结束。
2.2.2 安装必要的开发包
安装 react,react-dom 两个包
npm install –save-dev react react-dom
安装 webpack
npm install –save-dev webpack-cli webpack webpack-dev-server
2.2.3 编写一个 react 的 hello world
首先我们编写一个 HelloWorld 的 React 组件
import React, {PureComponent} from ‘react’
export default class index extends PureComponent {
render() {
return (
<div>
Hello world React!
</div>
)
}
}
但是这仅仅是一个组件，我们需要一个 HTML 页面来容纳 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>Helloworld React</title>
</head>
<body>
<div id=”app”></div>
</body>
</html>
到这一步，React 需要准备的东西已经完成了。
我们需要来编写 webpack 对这个项目进行打包，而 webpack 对开发提供的 DevServer 的支持，让我们来看一看，到底怎么做的。
我们在项目根目录中创建一个名为 ’webpack.config.js’ 的文件。
const path = require(‘path’)
module.exports = {
mode:’development’,
entry: ‘./src/index.js’,
context: __dirname,
target: ‘web’,
devServer: {
proxy: {},
contentBase: path.join(__dirname, ‘public’),
historyApiFallback: true,
hot: true,
noInfo: true,
port: 3000
}
}
配置完 webpack.config.js 文件之后，我们将在 packageInfo.json 中的 scripts 节点加入一个新的命令。
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“dev”: “webpack-dev-server”
},
我们在终端运行 npm run dev 之后，你将会在控制台中看到如下内容。
webpack 编译之后告诉我们，它无法识别 JSX 格式。这个问题就延伸出了，我们该如何对现代化的前端进行配置。
现在对于前端代码的转换，通常采用的是 babel 转译。我们来看看编译 react 需要哪些插件。点此查看 babel 如何配置 webpack
首先，我们需要安装 babel, 在终端输入 npm install –save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
我们修改 webpack.config.js 文件，让他看起来像这样
const path = require(‘path’)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
mode: ‘development’,
entry: ‘./src/entry.js’,
context: __dirname,
target: ‘web’,
devServer: {
proxy: {},
contentBase: path.join(__dirname, ‘public’),
port: 3000
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: “babel-loader”
}]
},
plugins: [
new HtmlWebpackPlugin(
Object.assign({}, {
inject: true,
template: __dirname + ‘/public/index.html’,
})
),
]
}
在根目录创建.bablerc 文件，这个文件是用于配置 babel 编译的, 在文件中输入以下内容。
{
“presets”: [“@babel/preset-env”,”@babel/preset-react”]
}
不知道你是否注意到了，我修改了 entry 入口文件。因为仅仅一个 React 组件并无法正常运行，我们需要告知 React 框架，我们将组件注入在哪个 DOM 下，这个文件可以配置全局的 Store、路由、全局的设定等。我们在 src 目录下创建 entry.js, 下面是 entry.js 文件的源码。
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import Index from ‘./index’;
ReactDOM.render(<Index />, document.querySelector(‘#app’));
代码非常的简单，就是调用 ReactDOM 将 React 组件渲染到了 id 为 app 的节点下。
OK, 现在我们再次运行 npm run dev，你将会看到 webpack 编译成功的提示，我们现在打开浏览器，输入 http://localhost:3000，你将会看到运行编译成功的网页。
2.2.4 webpack 加入 HMR 支持 (热更新)
大家有没有发现，我们现在这个项目修改了之后，是需要刷新整个页面的。并没有那种很高端很大气的动态刷新？
现在我们就将热更新加入我们的项目中。
我们将 webpack.config.js 文件做如下修改
const path = require(‘path’)
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
const webpack = require(‘webpack’)
module.exports = {
mode: ‘development’,
entry: [
‘webpack/hot/dev-server’,
‘./src/entry.js’
],
output: {
filename: ‘[name].bundle.js’,
path: path.resolve(__dirname, ‘dist’)
},
context: __dirname,
target: ‘web’,
devServer: {
proxy: {},
contentBase: path.join(__dirname, ‘public’),
hot: true,
port: 3000
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: “babel-loader”
}]
},
plugins: [
new HtmlWebpackPlugin(
Object.assign({}, {
inject: true,
template: __dirname + ‘/public/index.html’,
})
),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
注意到了么，我们新增了 NamedModulesPlugin 和 HotModuleReplacementPlugin 两个插件。还在 devServer 节点中加入了 hot:true，并且追加了 output 节点。
然后，我们将 entry.js 文件修改为这样：
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import Index from ‘./index’;
ReactDOM.render(< Index / > , document.querySelector(‘#app’));
if (module.hot) {
module.hot.accept()
}
我们再次使用 npm run dev 运行项目，然后修改 index.js 文件中的字符串，你会发现，现在是无刷新更新页面内容了。
2.2.5 webpack 优化打包速度
我们在 package.json 的 scripts 节点中加入一条新语句 ”webpack”:”webpack”, 然后来看一看现在项目默认的打包速度是多少时间。
耗时:2211ms
2.2.5.1 babel 缓存
我们修改 webpack.config.js 文件中的 babel 配置项
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: “babel-loader?cacheDirectory=true”
}]
},
在 babel-loader 后面加入了 cacheDirectory=true，再次执行编译，第一次你会发现速度并没有优化，这是因为还没有建立缓存文件，但是第二次速度就提升了 20%。
耗时:1644ms (-500ms)
其他的包括抽取公共组件，加入 hash 等等策略我们以后再细聊。
源码下载地址:https://github.com/yodfz/learn-webpack-react-config
原文地址:https://www.yodfz.com/detail/…