npm install -g create-react-app
//切记项目名称不能大写
create-react-app firstapp
cd firstapp
npm run start

 "dependencies": {//一个为了兼容浏览器,为样式自动添加前缀的库"autoprefixer": "7.1.6",//babel es6->es5"babel-core": "6.26.0","babel-eslint": "7.2.3","babel-jest": "20.0.3","babel-loader": "7.1.2","babel-preset-react-app": "^3.1.0","babel-runtime": "6.26.0",//对于这个插件不是很了解，简单看了一下文档，应该是为了兼容引入插件时的路径问题。"case-sensitive-paths-webpack-plugin": "2.1.1","chalk": "1.1.3",//css引入插件,将css装载到JavaScript例如 import './index.css'"css-loader": "0.28.7",//env 处理"dotenv": "4.0.0",//当你运行或者构建的时候，可以检查语法的库。我只能说这个库非常有用，//毕竟有时候除了error致命，warning也非常致命（如果你不注意的话）"eslint": "4.10.0","eslint-config-react-app": "^2.0.1","eslint-loader": "1.9.0","eslint-plugin-flowtype": "2.39.1","eslint-plugin-import": "2.8.0","eslint-plugin-jsx-a11y": "5.1.1","eslint-plugin-react": "7.4.0",//css 打包插件"extract-text-webpack-plugin": "3.0.2",//文件加载打包插件包括图片，js文件等"file-loader": "1.1.5",//文件系统扩展模块"fs-extra": "3.0.1",//html生成插件，可以自动引入css和js"html-webpack-plugin": "2.29.0",//单元测试工具"jest": "20.0.4",//目测应该是Object.assign()的兼容库---不懂。。。"object-assign": "4.1.1",//一种用于修复flexbug的bug的插件。"postcss-flexbugs-fixes": "3.2.0",//css构建中，浏览器兼容库"postcss-loader": "2.0.8",//promise库"promise": "8.0.1","raf": "3.4.0",//内置react相关库"react": "^16.1.1","react-dev-utils": "^4.2.1","react-dom": "^16.1.1",//样式加载库，使JavaScript认识css"style-loader": "0.19.0",//不是很了解，搜了一下应该提供一种web前端的缓存方案的库"sw-precache-webpack-plugin": "0.11.4",//css和dom属性中 的各种文件引入"url-loader": "0.6.2",//webpack"webpack": "3.8.1","webpack-dev-server": "2.9.4","webpack-manifest-plugin": "1.3.2",//fetch 请求，一种更加优雅异步加载的请求方式"whatwg-fetch": "2.0.3"}

'use strict';const fs = require('fs');
const path = require('path');
const paths = require('./paths');// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {throw new Error('The NODE_ENV environment variable is required but was not specified.');
}// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [`${paths.dotenv}.${NODE_ENV}.local`,`${paths.dotenv}.${NODE_ENV}`,// Don't include `.env.local` for `test` environment// since normally you expect tests to produce the same// results for everyoneNODE_ENV !== 'test' && `${paths.dotenv}.local`,paths.dotenv,
].filter(Boolean);// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.
// https://github.com/motdotla/dotenv
dotenvFiles.forEach(dotenvFile => {if (fs.existsSync(dotenvFile)) {require('dotenv').config({path: dotenvFile,});}
});// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebookincubator/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '').split(path.delimiter).filter(folder => folder && !path.isAbsolute(folder)).map(folder => path.resolve(appDirectory, folder)).join(path.delimiter);// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;function getClientEnvironment(publicUrl) {const raw = Object.keys(process.env).filter(key => REACT_APP.test(key)).reduce((env, key) => {env[key] = process.env[key];return env;},{// Useful for determining whether we’re running in production mode.// Most importantly, it switches React into the correct mode.NODE_ENV: process.env.NODE_ENV || 'development',// Useful for resolving the correct path to static assets in `public`.// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.// This should only be used as an escape hatch. Normally you would put// images into the `src` and `import` them in code to get their paths.PUBLIC_URL: publicUrl,});// Stringify all values so we can feed into Webpack DefinePluginconst stringified = {'process.env': Object.keys(raw).reduce((env, key) => {env[key] = JSON.stringify(raw[key]);return env;}, {}),};return { raw, stringified };
}module.exports = getClientEnvironment;

### What other `.env` files can be used?>Note: this feature is **available with `react-scripts@1.0.0` and higher**.* `.env`: Default.
* `.env.local`: Local overrides. **This file is loaded for all environments except test.**
* `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.
* `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.Files on the left have more priority than files on the right:* `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`
* `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`
* `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)

// Tools like Cloud9 rely on this.
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
const HOST = process.env.HOST || '0.0.0.0';// We attempt to use the default port but if it is busy, we offer the user to
// run on a different port. `detect()` Promise resolves to the next free port.
choosePort(HOST, DEFAULT_PORT).then(port => {if (port == null) {// We have not found a port.return;}const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';

HTTPS=true
PORT=3001

'use strict';const path = require('path');
const fs = require('fs');
const url = require('url');// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);const envPublicUrl = process.env.PUBLIC_URL;function ensureSlash(path, needsSlash) {const hasSlash = path.endsWith('/');if (hasSlash && !needsSlash) {return path.substr(path, path.length - 1);} else if (!hasSlash && needsSlash) {return `${path}/`;} else {return path;}
}const getPublicUrl = appPackageJson =>envPublicUrl || require(appPackageJson).homepage;// We use `PUBLIC_URL` environment variable or "homepage" field to infer
// "public path" at which the app is served.
// Webpack needs to know it to put the right <script> hrefs into HTML even in
// single-page apps that may serve index.html for nested URLs like /todos/42.
// We can't use a relative path in HTML because we don't want to load something
// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
function getServedPath(appPackageJson) {const publicUrl = getPublicUrl(appPackageJson);const servedUrl = envPublicUrl ||(publicUrl ? url.parse(publicUrl).pathname : '/');return ensureSlash(servedUrl, true);
}// config after eject: we're in ./config/
module.exports = {dotenv: resolveApp('.env'),appBuild: resolveApp('build'),appPublic: resolveApp('public'),appHtml: resolveApp('public/index.html'),appIndexJs: resolveApp('src/client/index.js'),appPackageJson: resolveApp('package.json'),appSrc: resolveApp('src'),yarnLockFile: resolveApp('yarn.lock'),testsSetup: resolveApp('src/__tests__/index.test.js'),appNodeModules: resolveApp('node_modules'),publicUrl: getPublicUrl(resolveApp('package.json')),servedPath: getServedPath(resolveApp('package.json')),
};

//原生代码
entry: [//引入三个es6新特性require.resolve('./polyfills'),//载入热更新require.resolve('react-dev-utils/webpackHotDevClient'),//入口文件paths.appIndexJs,],

entry:{
index:[//引入三个es6新特性require.resolve('./polyfills'),//载入热更新require.resolve('react-dev-utils/webpackHotDevClient'),//入口文件path.resolve(paths.appSrc, "index/index.js")],
admin:[//引入三个es6新特性require.resolve('./polyfills'),//载入热更新require.resolve('react-dev-utils/webpackHotDevClient'),//入口文件path.resolve(paths.appSrc, "admin/index.js")],
}

//增加模块名字和hash值 避免缓存  等等一切问题
filename: 'static/js/[name].[hash:8].bundle.js',

new HtmlWebpackPlugin({inject: true,chunks: ['index'],template: paths.appHtml,filename: "index/index.html"}),
new HtmlWebpackPlugin({inject: true,chunks: ['admin'],template: paths.appHtml,filename: "admin/index.html"}),

REACT_APP_ENTRY=["index","admin"]

const env = getClientEnvironment(publicUrl);
function setEntryConfig(arrayString) {let entryArray = JSON.parse(arrayString)if (!Array.isArray(entryArray)) {console.log("请确保entry是一个数组")return {}}let entry = {}entryArray.map(function (item) {entry[item] = [require.resolve("./polyfills"),require.resolve('react-dev-utils/webpackHotDevClient'),//合成入口文件path.resolve(paths.appSrc, item + "/index.js")]})return entry
}
function setHtmlPluginConfig(arrayString) {let entryArray = JSON.parse(arrayString)if (!Array.isArray(entryArray)) {console.log("请确保entry是一个数组")return []}let plugin = []entryArray.map(function (item) {plugin.push(new HtmlWebpackPlugin({inject: true,chunks: [item],template: paths.appHtml,filename: item + "/index.html"}))})return plugin
}

entry: setEntryConfig(env.raw.REACT_APP_ENTRY),...(setHtmlPluginConfig(env.raw.REACT_APP_ENTRY)),