-
Notifications
You must be signed in to change notification settings - Fork 83
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
react-multi-page-app wiki #1
Comments
这框架要使用组件按需加载如何配置,指点一下 |
你就不能好好封装下? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
react多页面应用架构及使用
概览
特性
安装&使用
新创建页面在src下添加文件夹并创建
pageinfo.json
然后npm run dev
即可技术使用
react16
webpack4
html-webpack-plugin 生成html文件
mini-css-extract-plugin css分离打包
uglifyjs-webpack-plugin js压缩
optimize-css-assets-webpack-plugin css压缩
es6
babel
sass
&bulma
react-redux
node
opn 打开浏览器
compression 开启gzip压缩
express
fs
&progress
git
目录结构
实现
webpack打包单页面应用
webpack在单页面打包上应用广泛,以create-react-app为首的接触脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口
webpack单页面打包配置
webpack.config.js
这样就可以在
dist
文件夹下打包出一个下面这样的文件webpack多页面打包配置
webpack 的entry支持两种种格式
打包单个文件
这样就会在dist下打包出一个bundle.js
打包出多个文件
上面在dist下打包出两个与entry属性名对应的js文件
将每个js挂载到相应的html文件上
这里我们需要用到
html-webpack-plugin
这个webpack插件,每添加一个页面就需要在plugins添加一个new HtmlWebpackPlugin({....})
html-webpack-plugin
会通过template.html
模板生成对应的filename名的html文件,并一并打包到output中对应的文件夹下,注意,在没有特殊配置的情况下所有打包的文件都是对应到output中path
这个目录下,也包括html。这里的chunks
需要注意,它是确定该html需要引入哪个js,如果没写的话,默认会引出所有打包的js,当然这不是我们想要的。上面的配置最终可以在dist下打包出下面的文件结构
通过上面这样的配置,再加上devServer,我们已经可以实现多页面的配置开发了,但这样很不智能,因为你每增加一个页面,就要在wepback里面配置一次,会非常繁琐,所以我们来优化下,让我们只专注于开发页面,配置交给webpack自己.
webpack多页面配置优化
我们再看下src下面的文件结构
src下面每个文件夹对应一个html页面的js业务,如果我们直接把文件夹对应入口js找到并把他们合并生成对应的entry,那是不是就不用手动写entry了呢,是的!
遍历文件目录
比如在src下有index页面项目,about项目 遍历结果为["index","about"];
遍历生成打包入口数组
这里我们使用getFilepath获取的数组,在获取到每个目录下的js文件,组合成一个js入口文件的如下格式的对象。
在webpack中使用get-entry
这样我们就自动获取到了entry
html-webpack-plugin自动配置
因为每个页面都需要配置一个html,而且每个页面的标题,关键字,描述等信息可能不同,所以我们在每个页面文件夹下创建一个pageinfo.json,通过fs模块获取到json里信息再遍历到对应得html-webpack-plugin中生成一个html插件数组。
index/pageinfo.json
生成index.html
页面信息todo/pageinfo.json
生成todo.html
页面信息供通过fs遍历读取并生成HtmlWebpackPlugin数组供webpack使用
遍历html插件数组
wbpack终极配置
这样一个自动化完整的多页面架构配置就完成了,如果我们要新创建一个页面
index.js
(必须,因为是webpack打包入口文件)pageinfo.json
(非必须) 供html插件使用npm run dev
开发完整代码参考项目code
The text was updated successfully, but these errors were encountered: