本文讲述如何使用React 创建MPA多页面代码框架,主要分两个大步骤进行:
看这篇文章的,大多是同行,直接上干货!
使用npx避免全局安装React到你机器上,占用你的空间
使用此命令,是因为大型项目往往需要对webpack配置进行修改
大型项目一般都包括以下常用的包
npm i redux react-redux redux-thunk --save
npm i normalize.css --save
为了下一步重构目录结构
index.js, index.css, App.jsx, App.css, reducers.js, actions.js, store.js
index是为了挂接App到html的root上,做了这一步,你就可以在App上尽情发挥了
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import store from './store'
import App from './App.jsx'
import 'normalize.css/normalize.css'
import './index.css'
ReactDOM.render(
<Provider store = {store}>
<App/>
</Provider>,
document.getElementById('root')
)
一般需要使用connect对其进行包裹
import {connect} from 'react-redux'
import './App.css'
function App(props) {
}
export default connect(
function mapStateToProps(state) {},
function mapDispatchToProps(dispatch) {}
)(App)
export default {}
import { createStore, combineReducers, applyMiddleware} from 'redux'
import reducers from './reducers'
import thunk from 'redux-thunk'
export default createStore(
combineReducers(reducers),
{},
applyMiddleware(thunk)
)
因为已经修改了目录结构,这里需要修改一下
appIndexJs: resolveModule(resolveApp, 'src/index/index'),
appHtml: resolveApp('public/index.html'),
appQueryHtml: resolveApp('public/query.html'),
appIndexJs: resolveModule(resolveApp, 'src/index/index'),
appQueryJs: resolveModule(resolveApp, 'src/query/index'),
修改entry 部分:
entry: {
index:[
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
].filter(Boolean),
query:[
isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appQueryJs,
].filter(Boolean),
},
修改plugins部分:
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
filename: 'index.html',
chunks: ['index'],
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appQueryHtml,
filename: 'query.html',
chunks: ['query'],
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
很遗憾,你将碰到如下问题:报Cannot read property ‘filter’ of undefined
注释掉entrypoint相关部分
new ManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: paths.publicUrlOrPath,
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,
};
},
}),