共计 2354 个字符，预计需要花费 6 分钟才能阅读完成。
写在开头
该系列文章主要是本人在学习慕课网 React 全栈课程中的一些记录和分享。该课程主要是利用 React 构建 cnode 网站，接口由 cnode 官方提供。由于课程中的 webpack，babel 版本较老，本次分享均是用的 webpack4 和 Babel7。本系列文章重点不是 React，主要是分享前端工程化的构建和服务端渲染（SSR）。
本次分享的代码将会放到我的 github 上面。
工程初始化和 webpack 基础配置
新建项目文件夹，在 cmd 窗口中运行 npm init, 输入一些配置项后即可生成一个 npm 项目。运行 git init, 对该项目进行 git 版本管理。在项目中新建 build 和 client 文件夹，build 文件夹存放 webpack 配置文件，client 文件夹存放客户端的开发文件。
首先安装基础的依赖 React 和 Webpack。
npm i react -S
npm i webpack -D // - D 为开发依赖
npm i webpack-cli -D // webpack4，需要安装 cli 依赖
新建一些文件
build/webpack.config.js // webpack 配置文件
client/app.js // 项目的入口文件
client/App.jsx // react 入口文件
webpack 基础配置，详细配置可参照官网
const path = require(‘path’) // path 包解决不同操作系统中路径不一致问题
function resolvePath(filePath) {
return path.join(__dirname, filePath);
}
module.exports = {
mode: ‘development’, // 开发模式或生产模式
// 入口文件，webpack 编译的入口
entry: {
app: resolvePath(‘../client/app.js’)
},
// 打包后文件的输出地址
output: {
filename: ‘[name].[hash].js’, //name 和 hash 是其中的两个变量
path: resolvePath(‘../dist’), // 打包后文件的位置
publicPath: ” //
}
}
webpack 基本配置完成了，在 package.json 中的 scripts 中增加一个 build 命令
“scripts”: {
“build”: “webpack –config build/webpack.config.js”
},
在 app.js 中随便写一点内容，在 cmd 中运行 npm run build, 在当前文件夹下会生成一个 dist 目录，该目录下即为经 webpack 编译后的文件。该部分代码位于仓库的 2 - 3 分支下
如果初始化 git 后，在项目下添加 .gitignore 文件，用来配置不需要版本管理的文件夹或文件，如 node_modules 等
babel-loader 及 babel 的配置
由于在项目中用到 ES6 和 jsx 语法，所有需要用 babel 先编译。babel-loader 也是 react 官方的编译器。我们现在 app 和 App 文件中写一些简单的内容。
App.jsx
import React from ‘react’
// 一个简单的 react 组件
export default class App extends React.Component {
render() {
return (
<div>This is app</div>
)
}
}
app.js
// 将 App.jsx 中的组件挂载到 body 上（仅作演示，不建议挂载到 body 上）
import React from ‘react’
import ReactDOM from ‘react-dom’
import App from ‘./App’
ReactDOM.render(<App />, document.body)
配置 webpack 中的 loader，loader 主要是转换代码的作用，如将 jsx 代码转为 js 代码。我们需要安装 babel-loader，@babel/core 和 @babel/preset-react 三个依赖，均用 - D 安装。
resolve: {
extensions: [‘.js’,’.jsx’] // 默认文件后缀。在 app.js 中，直接引入 App，而不是 App.jsx。所有的 js 和 jsx 文件在引入时均可省略后缀
},
// 配置 loader
module: {
rules: [
{
test: /.jsx$/, // 正则，处理以.jsx 结尾的文件
loader: ‘babel-loader’ // 使用的 loader
},
{
test: /js$/, // 主要是将 ES6 或更高级别的无法转为 ES5 版本
loader: ‘babel-loader’,
exclude: [
resolvePath(‘../node_modules’) // 忽略 node_modules 中的文件
]
}
]
},
配置完 webpack 后，babel 还没有生效。需要在项目中新建一个.babelrc 文件，配置项如下。
// babel7 的配置比较简洁，直接使用官方的 preset-react 即可。
{
“presets”: [“@babel/preset-react”]
}
运行 npm run build 命令，新生成的 js 文件就会包含 react 相关的代码了。
目前生成的文件均为 js 文件，并没有 html 文件的生成。我们之需要安装 html-webpack-plugin，然后再 webpack 中配置即可
const HTMLPlugin = require(‘html-webpack-plugin’)
modeule.exports = {
//………
plugins: [
new HTMLPlugin()
]
}
再次运行 build 命令后，会再 dist 目录下生成一个 index.html 文件，打开即可看见我们再 App.jsx 中的内容。该部分代码位于仓库的 2 - 4 分支下
