So ändern Sie die Create-React-App, um mehrere Seiten zu unterstützen

Dieses Mal zeige ich Ihnen, wie Sie die Create-React-App so ändern, dass sie Mehrseiten unterstützt Werfen wir einen Blick darauf.

Ändern Sie den Entwicklungsprozess

Basierend auf dem Projekt, das über die Create-React-App generiert wurde

yarn run eject

wird verwendet um die HTML-Datei anzuzeigen

yarn add globby config/paths.js ändern

//遍历public下目录下的html文件生成arry
const globby = require('globby');
const htmlArray = globby.sync([path.join(resolveApp('public'), '/*.html')]);
//module.exports 里面增加
htmlArray

config/webpack.config.dev.js ändern

<!--增加配置-->
// 遍历html
const entryObj = {};
const htmlPluginsAray = paths.htmlArray.map((v)=> {
 const fileParse = path.parse(v);
 
 entryObj[fileParse.name] = [
  require.resolve('./polyfills'),
  require.resolve('react-dev-utils/webpackHotDevClient'),
  `${paths.appSrc}/${fileParse.name}.js`,,
 ]
 return new HtmlWebpackPlugin({
  inject: true,
  chunks:[fileParse.name],
  template: `${paths.appPublic}/${fileParse.base}`,
  filename: fileParse.base
 })
});
<!--entry 替换为entryObj-->
entry：entryObj
<!--替换htmlplugin内容-->
// new HtmlWebpackPlugin({
//  inject: true,
//  chunks: ["index"],
//  template: paths.appPublic + '/index.html',
// }),
...htmlPluginsAray,

config/webpackDevServer.config.js ändern

// 增加
const path = require('path');
const htmlPluginsAray = paths.htmlArray.map((v)=> {
 const fileParse = path.parse(v);
 return {
  from: new RegExp(`^\/${fileParse.base}`), to: `/build/${fileParse.base}`
 };
});
<!--historyApiFallback 增加 rewrites-->
rewrites: htmlPluginsAray

Die oben genannten Änderungen sind im Entwicklungsmodus. Probieren Sie Garnstart aus.

Produktprozess ändern

Konfiguration ändern/

//增加
// 遍历html
const entryObj = {};
const htmlPluginsAray = paths.htmlArray.map((v)=> {
 const fileParse = path.parse(v);
 
 entryObj[fileParse.name] = [
  require.resolve('./polyfills'),
  `${paths.appSrc}/${fileParse.name}.js`,
 ];
 console.log(v);
 return new HtmlWebpackPlugin({
  inject: true,
  chunks:[fileParse.name],
  template: `${paths.appPublic}/${fileParse.base}`,
  filename: fileParse.base
 })
});
<!--修改entry-->
 entry: entryObj,
<!--替换 new HtmlWebpackPlugin 这个值-->
...htmlPluginsAray,

Kopiermodul hinzufügen (

)

yarn add cpySkripte/Build ändern. js

 // function copyPublicFolder () 替换
// 原来的方法是复制public下所有的内容，因为增加了多html 所以不再直接复制过去(直接复制会覆盖html)
const copyPublicFolder = async() => {
 await cpy([`${paths.appPublic}/*.*`, `!${paths.appPublic}/*.html`], paths.appBuild);
 console.log('copy success!');
 // fs.copySync(paths.appPublic, paths.appBuild, {
 //  dereference: true,
 //  filter: file => file !== paths.appHtml,
 // });
}

Testen Sie es nach der obigen Änderung

yarn build und prüfen Sie, ob das entsprechende HTML korrekt generiert wird.

Funktion hinzugefügt

Sass-Unterstützung (siehe hierzu das Dokument von create-react-app, achten Sie darauf, den „Start“ im Dokument nicht direkt zu kopieren: „react-scripts start“ , „build“: „react-scripts build“, da wir zuvor Garn ausgeworfen haben, daher gibt es Probleme, wenn Sie es so verwenden. Sie können es selbst ausprobieren)

// 增加模块
yarn add node-sass-chokidar npm-run-all
// package.json删除配置
"start": "node scripts/start.js",
"build": "node scripts/build.js",
// package.json里面增加scripts
"build-css": "node-sass-chokidar src/scss -o src/css",
"watch-css": "npm run build-css && node-sass-chokidar src/scss -o src/css --watch --recursive",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"build-js": "node scripts/build.js",
"build": "npm-run-all build-css build-js",

html Modul importieren

yarn add html-loader
<!--index.html-->
<%= require(&#39;html-loader!./partials/header.html&#39;) %>

html Sie können img hineinschreiben, um das Packen in den Build zu unterstützen. Wenn Sie es nicht schreiben, wird es nicht gepackt, es sei denn, Sie benötigen

<img src="<%= require(&#39;../src/imgs/phone.png&#39;) %>" alt="">

in js und dann den Hash und andere Konfigurationen abbrechen, wird dies nicht aufgezeichnet.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So erstellen Sie eine Webpack+React-Entwicklungsumgebung

Wie Sie JS zur Implementierung von 3des+ verwenden Base64-Verschlüsselungs- und Entschlüsselungsalgorithmus

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Create-React-App, um mehrere Seiten zu unterstützen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!