打包项目

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路由有两种,HashRouterBrowserRouter

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 需要设置成 './'