React-多页面应用 react怎么写页面_react_前端技术

1初始化项目

npm init create-react-app my-app

2.修改index

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

3.修改app.js文件

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      page1
    </div>
  );
}

export default App;

4.修改多目录结构

React-多页面应用

5.弹出webpack配置

npm run eject

6.进入config/paths.js中配置appIndexJs路径，默认是路径字符串，现在获取几个页面的字符串列表，将会配置在入口地址。
在module.exports之前添加如下代码

const glob = require('glob');
// 获取指定路径下的入口文件
function getEntries(globPath) {
  const files = glob.sync(globPath),
    entries = {};
  files.forEach(function(filepath) {
      const split = filepath.split('/');
      const name = split[split.length - 2];
      entries[name] = './' + filepath;
  });
  return entries;
}

const entries = getEntries('src/**/index.js');

function getIndexJs() {
  const indexJsList = [];
  Object.keys(entries).forEach((name) => {
    const indexjs = resolveModule(resolveApp, `src/${name}/index`)
    indexJsList.push({
      name,
      path: indexjs
    });
  })
  return indexJsList;
}
const indexJsList = getIndexJs()

然后更改module.exports内容

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appHtml: resolveApp('public/index.html'),
  appIndexJs: indexJsList, // +++++++++++++
  appPackageJson: resolveApp('package.json'),
  appSrc: resolveApp('src'),
  appTsConfig: resolveApp('tsconfig.json'),
  appJsConfig: resolveApp('jsconfig.json'),
  yarnLockFile: resolveApp('yarn.lock'),
  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
  proxySetup: resolveApp('src/setupProxy.js'),
  appNodeModules: resolveApp('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
  entries // +++++++++++++
};

上面有+号的部分为更改的内容。

7.配置entry入口

// 配置入口
  const entry = {}
  paths.appIndexJs.forEach(e => {
    entry[e.name] = [
      isEnvDevelopment &&
        require.resolve('react-dev-utils/webpackHotDevClient'),
      e.path
    ].filter(Boolean)
  });

8.更改出口文件配置

// 没更改之前的
// filename: isEnvProduction
// ? 'static/js/[name].[contenthash:8].js'
// : isEnvDevelopment && 'static/js/bundle.js',
...
// chunkFilename: isEnvProduction
// ? 'static/js/[name].[contenthash:8].chunk.js'
// : isEnvDevelopment && 'static/js/[name].chunk.js',

// 更改后的
filename: isEnvProduction
? 'static/js/[name]/[name].[contenthash:8].js'
: isEnvDevelopment && 'static/js/[name]/[name].bundle.js',
...
chunkFilename: isEnvProduction
? 'static/js/[name]/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name]/[name].chunk.js',

9.更改htmlwebpackPlugin

HtmlWebpackPlugin
这个plugin曝光率很高，他主要有两个作用

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
现在删除之前的配置，然后加入一下的Plugin配置。

...Object.keys(paths.entries).map((name) => {
    return new HtmlWebpackPlugin(
      Object.assign(
        {},
        {
          inject: true,
          chunks: [name],
          template: paths.appHtml,
          filename: name + '.html',
        },
        isEnvProduction
          ? {
              minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
              },
            }
          : undefined
      )
    )
}),

// new ManifestPlugin({
//   fileName: 'asset-manifest.json',
//   publicPath: publicPath,
//   generate: (seed, files, entrypoints) => {
//     const manifestFiles = files.reduce((manifest, file) => {
//       manifest[file.name] = file.path;
//       return manifest;
//     }, seed);
//     const entrypointFiles = entrypoints.main.filter(
//       fileName => !fileName.endsWith('.map')
//     );

//     return {
//       files: manifestFiles,
//       entrypoints: entrypointFiles,
//     };
//   },
// }),

打包后应用资源错误

解决方案：package.json

添加

"homepage": ".",

原文链接：https://blog.csdn.net/qq_38111015/article/details/89252606

查看更多关于【react】的文章