探索 npm run eject
! 须得 git commit 之后才能执行此命令，不然可能会报错 “untracked file” 原因未知。
eject 之后特点：
1.所有依赖都被添加至 dependencies ，devdependencies 中无项目。
2.如果要修改 webpack 相关设置，修改 config/webpack.config.prod.js 有效，修改 config/webpack.config.dev.js 无效。（体现在 npm run build 之后的文件列表。原因暂时未知，推测有个设置键设定默认打包为产品）行为：
1.修改了文件内容
package.json
package-lock.json
2.添加了文件夹
config（内有附加内容）
scripts（内有附加内容）
！ 我们先接下来的内容默认都为在已经 eject 的环境之下
1.输出绝对路径改为相对路经，使得静态 html 文件在非服务器环境下也能运行。
打包过后的代码的相互引用都是默认为部署在服务器环境模式，即绝对定位，例如 create-react-app 打包后的 html 文件内部引用其他文件都是 ‘/static/....’；我们现在要改为 ‘./static/...’ 相对路经的形式。
直接修改 package.json。在内部添加一个 homepage 键，赋值为 '.' 即可。这种修改在 eject 之前同样有效。
2.修改入口文件，将单页富应用改为多页应用。（目的是最小化加载代码）
你需要事先了解，整个打包过程是在 nodejs 环境下执行，所以几乎所有 webpack 有关的配置文件诸如 webpack.config.prod.js 当中会引入一些看上去不知名的文件，例：
//webpack.config.prod.js const path = require('path');这实际上就是引入 nodejs 核心模块代码，具体还有什么及全部功能请参看 nodejs 官方文档。
这里我们以最简单的 create-react-app 的示例为例，目的是造两个入口，输出两个 index.html，并且各自依赖不同的输出 js，达到的效果就是运行 index.html 是默认效果，运行 index2.html 当中有两个 react logo 的转动图标。
2-1. 修改客户端相关文件及文件分布，开发分离效果
./src 中添加 index2.js 和 App2.js
//index2.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App2';
ReactDOM.render(<App />, document.getElementById('root'));
//App2.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
2-2.修改 ./config/paths.js 和 webpack.config.prod.js
paths.js 文件输出了很多目录，在 webpack.config.prod.js 中也引用很多来自 paths 的导出目录，事实上我理解的 paths.js 就是为了能更傻瓜化地配置路经相关设置，而提出的接口文件，所以我们也修改此文件以延续此做法。
//paths.js
module.exports = {
...,
appIndexJs: resolveModule(resolveApp, 'src/index'),
appIndexJs2: resolveModule(resolveApp, 'src/index2'),
...
};
//webpack.config.prod.js
module.exports = {
...,
entry: {
index:paths.appIndexJs,
index2:paths.appIndexJs2
},
output:{
...,
filename: 'static/js/[name].[chunkhash:8].js',
chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
},
...,
plugins:[
new HtmlWebpackPlugin({
filename:"index.html",
inject: true,
template: paths.appHtml,
minify: {
...
},
chunks:["index"]
}),
new HtmlWebpackPlugin({
filename:"index2.html",
inject: true,
template: paths.appHtml,
minify: {
...
},
chunks:["index2"]
})
]
}
注意每个 htmlplugin 如果模板不同请再另行配置指向。
现在我们打包之后可以看到多打包出了一个 index2.[chunkhash].js 并且其内部 js 关联指向也没有问题。
下一篇我们将讨论不 eject 的情况下修改配置。
作者水平有限，如有错误，欢迎交流指正。
