配置 create-react-app 的 webpack 设定

探索 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 的情况下修改配置。

---

作者水平有限，如有错误，欢迎交流指正。

---