Q1. yarn build打包生成的文件直接点击index.html报错，打不开，导致的问题是yarn build打包生成的文件部署到服务器时只能在服务器根目录，如果在其他文件夹里面会报错

A1:

默认情况下，index.html中引入js和css的方式是，需要在本地启一个服务器才行，即在打包文件根目录下打开命令行，输入http-server，即可通过localhost:8080来访问到项目。

解决办法是：

1.将所有引入资源文件的地方路径改为./，eg:，即可通过直接点击index.html来打开项目。

2.打包前在package.json文件里添加一个配置："homepage":"."，打包之后资源文件路径前面都会加上一个点

{

"name": "test04",

"version": "0.1.0",

"private": true,

"dependencies": {

"react": "^16.0.0",

"react-dom": "^16.0.0",

"react-scripts": "1.0.17"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

"eject": "react-scripts eject"

},

"homepage":"."

}

这样直接点开会有一个报错

registerServiceWorker.js:71 Error during service worker registration: DOMException: Failed to register a ServiceWorker: The URL protocol of the current origin ('null') is not supported.

原因是serviceWorker不支持//这种协议，需要放到https或者localhost下才行。参考网址

打包时默认执行react-script模块下的一些脚本配置文件，所以直接找到并修改这些文件也是可行的

具体路径是：项目文件夹\node_modules\react-scripts\config里面的paths.js文件

function getServedPath(appPackageJson) {

const publicUrl = getPublicUrl(appPackageJson);

const servedUrl =

envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');

return ensureSlash(servedUrl, true);

}

pathname改成./就可以了。参考网址

如果页面中引用了很多资源文件图片、视频、字体等，不可能一个个去自动建立好的文件里去找再修改路径，这时就可以在yarn build命令前设置PUBLIC_URL。

windows系统下：

set PUBLIC_URL=./ yarn build

mac、linux系统下：

PUBLIC_URL=./ yarn build

参考网址

Q2. 如何修改create-react-app的配置

A2:

现在 如果你正在搭建react运行环境，使用 create-react-app 去自动构建你的app程序。你的项目所在的文件夹下是没有配置文件。react-scripts 是唯一的 额外的 构建依赖在你的package.json中，你的运行环境将有每一个你需要用来构建一个现代React app应用程序。你需要的依赖，和在配置文件中编写的配置代码，react-scripts 都帮你写了，比如：react-scripts帮你自动下载需要的 webpack-dev-server 依赖，然后react-scripts自己写了一个nodejs服务端的脚本代码 start.js来 实例化 WebpackDevServer ，并且运行启动了一个使用 express 的Http服务器，现在你只需要专心写src源代码就可以了。省去了很多精力，最适合快速上手一个demo了。

有两种操作：

通过react-app-rewired插件，react-app-rewired的作用就是在不eject的情况下，覆盖create-react-app的配置。如果已经eject导出了配置，就没有必要使用react-app-rewired。使用插件的方法见官方文档,插件的相关介绍见参考网址

这个插件可以在不更改原始配置脚本的前提下更改默认配置，加一些plugins, 或者loaders，比如antd按需加载样式、less文件识别 。

按需加载参考链接：

引入 react-app-rewired并修改 package.json 里的启动配置:

$ yarn add react-app-rewired --dev

/* package.json */

"scripts": {

- "start": "react-scripts start",

+ "start": "react-app-rewired start",

- "build": "react-scripts build",

+ "build": "react-app-rewired build",

- "test": "react-scripts test --env=jsdom",

+ "test": "react-app-rewired test --env=jsdom",

}

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

module.exports = function override(config, env) {

// do stuff with the webpack config...

return config;

};

使用 babel-plugin-import, babel-plugin-import是一个用于按需加载组件代码和样式的 babel 插件(原理)，现在我们尝试安装它并修改 config-overrides.js 文件。

yarn add babel-plugin-import --dev

+ const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {

+ config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);

return config;

};

更改引用方式

- import Button from 'antd-mobile/lib/button';

+ import { Button } from 'antd-mobile';

LESS文件处理：

两种方式：

使用react-app-rewire-less插件。npm install --save react-app-rewire-less。

然后在项目根目录下创建 config-overrides.js文件，添加如下内容：

const rewireLess = require('react-app-rewire-less');

/* config-overrides.js */

module.exports = function override(config, env) {

config = rewireLess(config, env);

return config;

}

官方的参考链接：

First, let’s install the command-line interface for Sass:

npm install --save node-sass-chokidar

Alternatively you may use yarn:

yarn add node-sass-chokidar

Then in package.json, add the following lines to scripts:

"scripts": {

+ "build-css": "node-sass-chokidar src/ -o src/",

+ "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test --env=jsdom",

通过npm run eject来暴露所有的配置文件

转到自定义配置

如果你是重度用户 并且对默认配置不满意，你可以从工具中退出，并像样板生成器一样使用它。

运行 npm run eject 复制所有依赖文件和相应依赖 (Webpack、Babel、ESLint 等等) 到你的项目，因此完全可控。类似 npm start 和 npm run build 的命令依旧会工作， 但他们会指向复制的脚本，因此你可以调整。在这一点上，你只能靠自己。

注: 这是个单向操作。一旦 eject，你就回不去啦!

你可能不需要使用 eject。 这个功能集适合中小型部署，而且你不应该感到有义务使用此功能。但是，我们明白如果你无法自定义该工具，那么它将不会有用。参考网址

下面介绍如何修改暴露之后的配置文件来解决直接点击index.html报错问题

项目文件/config/paths.js修改如下：

function getServedPath(appPackageJson) {

const publicUrl = getPublicUrl(appPackageJson);

const servedUrl =

envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : './');

return ensureSlash(servedUrl, true);

}

pathname值改为./

下面介绍修改修改暴露之后的文件解决antd样式丢失问题：

项目文件/config/webpack.config.dev.js和项目文件/config/webpack.config.prod.js两个文件对应位置加上

"plugins": [

["import", {"libraryName": "antd-mobile", "style": "css"}],

],

修改之后是这样：

// Process JS with Babel.

{

test: /\.(js|jsx|mjs)$/,

include: paths.appSrc,

loader: require.resolve('babel-loader'),

options: {

"plugins": [

["import", {"libraryName": "antd-mobile", "style": "css"}],

],

compact: true,

},

},