您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)怎么將create-react-app修改為多頁(yè)面支持,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
修改dev流程
在已經(jīng)通過(guò)create-react-app生成項(xiàng)目的基礎(chǔ)下yarn run eject
yarn add globby
用于查看html文件
修改config/paths.js
//遍歷public下目錄下的html文件生成arry const globby = require('globby'); const htmlArray = globby.sync([path.join(resolveApp('public'), '/*.html')]); //module.exports 里面增加 htmlArray
修改config/webpack.config.dev.js
<!--增加配置--> // 遍歷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內(nèi)容--> // new HtmlWebpackPlugin({ // inject: true, // chunks: ["index"], // template: paths.appPublic + '/index.html', // }), ...htmlPluginsAray,
修改config/webpackDevServer.config.js
// 增加 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
以上就是dev模式下的修改了,yarn start一下試試。
修改product流程
修改config/
//增加 // 遍歷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 這個(gè)值--> ...htmlPluginsAray,
增加復(fù)制模塊(yarn add cpy
)
修改scripts/build.js
// function copyPublicFolder () 替換 // 原來(lái)的方法是復(fù)制public下所有的內(nèi)容,因?yàn)樵黾恿硕鄅tml 所以不再直接復(fù)制過(guò)去(直接復(fù)制會(huì)覆蓋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, // }); }
以上修改后測(cè)試下yarn build
查看下html對(duì)應(yīng)生成對(duì)不對(duì),正常是OK的。
增加功能
sass支持(此參考create-react-app的文檔,注意不要直接復(fù)制文檔里面的"start": "react-scripts start", "build": "react-scripts build",因?yàn)槲覀兦懊嬉呀?jīng)yarn eject,所以這樣用的話是有問(wèn)題的可以自行體驗(yàn)一下)
// 增加模塊 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引入模塊
yarn add html-loader <!--index.html--> <%= require('html-loader!./partials/header.html') %>
html里可以寫(xiě)img支持打包到build,如果不寫(xiě)的話是無(wú)法打包的,除非你在js里面require
<img src="<%= require('../src/imgs/phone.png') %>" alt="">
看完上述內(nèi)容,你們對(duì)怎么將create-react-app修改為多頁(yè)面支持有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。