打包项目

build脚本

想要把项目打包成静态资源，很简单，在package.json里面配置：

"scripts": {
    "build": "webpack --config webpack.config.js"
  },

webpack.config.js是你配置webpack的文件。

一般来讲，只要你webpack配置好了打包就没问题了。

编译前clean输出目录

如果你想在每次build之前把原来的输出目录清空，可以添加clean-webpack-plugin插件

npm install --save-dev clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  plugins: [
    new CleanWebpackPlugin({
      // root: path.resolve(__dirname, './src'),
      verbose: true,
      dry: false
    })
  ],

(这是webpack5.+的配置，仅供参考)

部署项目

部署项目之后index.html打开空白问题

空白原因：对应代码里的js、css等文件未引用成功，或对应文件未下载成功。

可以从两方面查找问题。

1、路径问题

路径问题，可以添加publicPath属性设置全局路径

const { merge } = require('webpack-merge')
const common = require('./webpack.config.js')

const HOME = './'
module.exports = merge(common, {
  output: {
    publicPath: `${HOME}` // 产线build使用
  },
  mode: 'production' //模式，两种模式，产线模式"production"、开发模式"development"。产线模式会把编译文件进行压缩优化，代码变成一行。
})

这里设置了全局路径是"./"，这样，所有引用的script文件前面都会加上“./”

2、路由问题

不要小看路有问题，路由决定了你能否正确显示对应的页面。

Ract路由有两种，HashRouter 和 BrowserRouter。

HashRouter 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。

BrowserRouter 是使用 React-Router 的应用推荐的 history方案。它使用浏览器中的 History API 用于处理 URL，创建一个像example.com/list/123这样真实的 URL 。

简单点说，

HashRouter会自动匹配路由，但是链接上会多一个#。

BrowserRouter是绝对路径路由，所以你要设置好服务器下的绝对访问路径（前面说的publicPath修改成以服务器根目录开始的反问路径）。另外，有可能会遇到路由跳转正常但刷新404的问题，这时候需要配置Nginx或通过自建Node服务器来解决。详见《这里》

如果你遇到页面加载不出来，页面空白等问题，首要考虑使用HashRouter。

如果你遇到页面刷新404页面不显示等问题，首要考虑配置服务器全局路径。

HashRouter使用示例

import React from "react";
import { HashRouter as Router, Switch, Route } from "react-router-dom";

import "./App.less";

import Home from './pages/home/home';


const App: React.FC = () => {

  return (
    <>
      <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/home" exact component={Home} />
      </Switch>
    </Router>
    </>
  );
};

export default App;

注意：使用 HashRouter 时， publicPath 需要设置成 './'