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(, document.getElementById('root'));

3.修改app.js文件

import React from 'react';

import'./App.css';functionApp() {return(

page1

);

}

exportdefault App;

4.修改多目錄結構

5.彈出webpack配置

npm run eject

6.進入config/paths.js中配置appIndexJs路徑，默認是路徑字符串，現在獲取幾個頁面的字符串列表，將會配置在入口地址。

在module.exports之前添加如下代碼

const glob = require('glob');//獲取指定路徑下的入口文件

functiongetEntries(globPath) {

const files=glob.sync(globPath),

entries={};

files.forEach(function(filepath) {

const split= filepath.split('/');

const name= split[split.length - 2];

entries[name]= './' +filepath;

});returnentries;

}

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

const indexJsList=[];

Object.keys(entries).forEach((name)=>{

const indexjs= resolveModule(resolveApp, `src/${name}/index`)

indexJsList.push({

name,

path: indexjs

});

})returnindexJsList;

}

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 newHtmlWebpackPlugin(

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

)

)

}),

注釋ManifestPlugin部分代碼

//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,//};//},//}),

總結

以上是生活随笔為你收集整理的react页面数据过多怎么办_React-多页面应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。