之前使用react开发了一个单页面的后台管理项目。因为项目越来越大，并且奇怪的需求越来越多，单页面给许多功能的开发带来了不好的体验，因此趁着这个机会研究了一下多页面开发方式。
在网上查了好多资料，但大部分都讲得有点模糊，不够详细，对于我这种菜鸟来说开发体验极差-_-||，明明很简单的东西……
所以，特此记录，以便于自己日后回顾学习。
言归正传
本文只需要使用者对react框架有基础的认识，并且能够动手跟着一起操作（看再多也不如敲两行代码），我也是一遍操作一遍写，确保能够正常运行。对于常用的运行环境，不另做讲解，可以搜索相关词条，自己动手查资料。
1、创建react项目
使用FB提供的脚手架----create-react-app进行项目创建：
create-react-app multipage
image.png
2、显示webpack相关文件：
npm run eject
当询问是否确认弹出？该操作不可逆的时候，输入Y，或者Y开头的任何词语，╮(╯_╰)╭
项目会对出这两个目录
image.png
我们主要用到的是webpack.config.dev.js（开发环境）和webpack.config.prod.js（生产环境）。因为我只是在本地开发测试的，所以不确定product下是否会有差别。其实应该是没有的，但坑踩多了，人就怂了- -。
3、整理src目录
为了保证目录清晰，删除一切多余的文件（图标、样式），仅保留必须的js文件，并按照真正的项目创建目录：
image.png
4、修改webpack.config.dev.js配置
我们主要修改以下几处
image.png
module.exports = {
//修改入口配置。
entry: {
home:[
//引入三个es6新特性
require.resolve('./polyfills'),
//热更新
require.resolve('react-dev-utils/webpackHotDevClient'),
//入口文件，仅需修改此行代码
path.resolve(paths.appSrc, "index.js")
// paths.appIndexJs
],
pageF:[
//引入三个es6新特性
require.resolve('./polyfills'),
//热更新
require.resolve('react-dev-utils/webpackHotDevClient'),
//入口文件，仅需修改此行代码
path.resolve(paths.appSrc, "pageF/index.js")
],
page0:[
//引入三个es6新特性
require.resolve('./polyfills'),
//热更新
require.resolve('react-dev-utils/webpackHotDevClient'),
//入口文件，仅需修改此行代码
path.resolve(paths.appSrc, "pageF/page0/index.js")
],
page1:[
//引入三个es6新特性
require.resolve('./polyfills'),
//热更新
require.resolve('react-dev-utils/webpackHotDevClient'),
//入口文件，仅需修改此行代码
path.resolve(paths.appSrc, "pageF/page1/index.js")
],
pageS:[
//引入三个es6新特性
require.resolve('./polyfills'),
//热更新
require.resolve('react-dev-utils/webpackHotDevClient'),
//入口文件，仅需修改此行代码
path.resolve(paths.appSrc, "pageS/index.js")
]
},
output: {
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
//修改此处，防止JS名称重复
filename: 'static/js/[name].[hash:8].js',
chunkFilename: 'static/js/[name].[hash:8].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
plugins:[
new InterpolateHtmlPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
//添加以下内容
new HtmlWebpackPlugin({
inject: true,
chunks: ['home'],
template: paths.appHtml,
filename: "index.html"
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ['pageF'],
template: paths.appHtml,
filename: "pageF/index.html"
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ['page0'],
template: paths.appHtml,
filename: "pageF/page0/index.html"
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ['page1'],
template: paths.appHtml,
filename: "pageF/page1/index.html"
}),
new HtmlWebpackPlugin({
inject: true,
chunks: ['pageS'],
template: paths.appHtml,
filename: "pageS/index.html"
}),
//结束
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
]
}
5、修改js
因为附带的有git地址，因此只粘贴home页面的JS
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<a href="pageF/index.html">pageF</a>
<div>
<a href="pageS/index.html">pageS</a>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
操作流程就是这样，改天再对各个部分进行解释标注
附上git地址：https://github.com/chuyinweilai/React/tree/master/multipage
网友评论