如何使用webpack构建多页面应用,这是一个我一直在想和解决的问题。网上也给出了很多的例子,很多想法。猛一看,觉得有那么点儿意思,但仔细看也就那样。
使用webpack这个构建工具,可以使我们少考虑很多的问题。
我们常见的单页面应用只有一个页面,它考虑问题,解决问题围绕着中心化去解决,因此很多麻烦都迎刃而解。如果你使用过vue.js,那么想必你一定用过vue-router,vuex,它们就是典型的中心化管理模式,当然还有很多,这里不一一列举了。
而多页面应用,我们不能再按照中心化模式的路走了,因为行不通,这也是很多人认为多页面应用不好做,或者干脆认为webapck只能做单页面应用,而不能做多页面应用的原因。
所以,我要说明的第一点儿是:不要用做单页面应用的思维来做多页面应用。
单页面的模块共享,其实是代码块在同一个页面的不同位置的重复出现;而多页面应用的代码块儿共享需要实现的不仅是同一个页面的共享,还要做到跨页面的共享。
所以,第一个要解决的问题是:不同页面的代码块共享如何实现?
单页面的路由管理,其实是根据用户的触发条件来实现不同的代码块的显隐;而多页面应用的路由管理则不然,它实现的是页面的跳转。
所以,第二个要解决的问题是:所页面应用的导航该如何做?
单页面的状态管理,很受开发者喜好。单页面是一个页面,所以页面中的数据状态的管理操作起来还算得心应手,那么多页面应用的呢,显然依靠它自身很难实现。
所以,第三个要解决的问题是:多页面应用的状态管理如何做?
注:这个问题问的其实有点儿傻,如果你做的是dom操作的多页面儿应用,就不用做状态管理了。如果你还是使用想vue.js这样的库,你就需要考虑要不要再用做多页面的状态管理了,因为此法儿就是为单页面应用做的,多页面儿行不通。
入口(entry):
webpack对入口不仅可以定义单个文件,也可以定义多个文件。
熟悉当页面应用开发的对于下面的代码应该不会陌生吧?
module.exports = {
entry: './src/index.js',
···
}
我第一次接触真正的单页面应用项目使用的就是angualrjs,使用的构建工具使webapck+gulp,其中的webpack.config.js中的看到的入口文件代码就是它。
后来,接触到的是数组形式,代码如下:
module.exports = {
entry: ['./src/index.js', 'bootstrap']
···
}
这样,将bootstrap和入口文件一起引用,就可以在任何一个代码块中使用boostrap。
再后来,接触到的是对象形式,代码如下:
module.exports = {
main: './src/index.js'
···
}
这样做的目的是为了给输出的文件指定特定的名字。
再后来,就是做多页面应用,就需要用到如下的代码:
module.exports = {
entry: {
index: './src/index.js',
aboutUs: './src/aboutus.js',
contactUs: './src/contactus.js'
}
}
为了引入第三方库,我们可以像如下这样做:
module.exports = {
entry: {
index: ['./src/index.js', 'loadsh'],
aboutUs: './src/aboutus.js',
contactUs: ['./src/contactus.js', 'lodash']
}
}
但为了共享模块代码,我们需要像下面这这样做:
const CommonsChunkPlugin = require('webpack').optimization.CommonsChunkPlugin
module.exports = {
entry: {
index: ['./src/index.js', './src/utils/load.js', 'loadsh'],
aboutUs: ['./src/aboutus.js', 'loadsh'],
contactUs: ['./src/contactus.js','./src/utils/load.js', 'lodash']
},
plugins: [
new CommonsChunkPlugin({
name: "commons",
filename: "commons.js",
chunks: ["index", "aboutUs", "contactUs"]
})
]
}
这样型就会形成如下所示的项目目录结构:
├── src
│ ├── common // 公用的模块
│ │ ├── a.js
│ │ ├── b.js
│ │ ├── c.js
│ │ ├── d.js
│ ├── uttils // 工具
│ │ ├── load.js // 工具代码load.js
│ ├── index.js // 主模块index.js (包含a.js, b.js, c.js, d.js)
│ ├── aboutUs.js // 主模块aboutus.js (包含a.js, b.js)
│ ├── contactUs.js // 主模块contactus.js (包含a.js, c.js)
├── webpack.config.js // css js 和图片资源
├── package.json
├── yarn.lock
但是这个内置插件的局限性比较大。正如上面所使用的那样,它只会提取chunks选项所匹配的模块共有的代码块。就如同上面代码表示的那样,它只会提取pindex, aboutUs, contactUs共有的代码块loadsh,而不会提取index, contactUs共有的代码块load.js。
当然,一般的第三方库,我们也不这样使用,而是像下面这样使用:
const CommonsChunkPlugin = require('webpack').optimization.CommonsChunkPlugin
module.exports = {
entry: {
index: ['./src/index.js', './src/utils/load.js'],
aboutUs: ['./src/aboutus.js'],
contactUs: ['./src/contactus.js','./src/utils/load.js'],
vendors: ['lodash']
},
externals: {
commonjs: "lodash",
root: "_"
},
plugins: [
new CommonsChunkPlugin({
name: "commons",
filename: "commons.js",
chunks: ["index", "aboutUs", "contactUs"]
})
]
}
对于web应用最终的目的是:匹配生成不同的html页面。
这里我们要使用的就是html-webpack-plugin。
首先,需要安装html-webpack-plugin:
yarn add --dev html-webpack-plugin
然后引入插件,并配置如下:
...
const HtmlWebapckPlugin = require('html-webpack-plugin');
...
plugins: [
...
new HtmlWebapckPlugin({
filename: 'index.html',
chunks: ['vendors', 'commons', 'index']
}),
new HtmlWebapckPlugin({
filename: 'aboutUs.html',
chunks: ['vendors', 'commons', 'aboutUs']
}),
new HtmlWebapckPlugin({
filename: 'contactUs.html',
chunks: ['commons', 'contactUs']
})
],
...
这样一个基于webpack3.x的多页面框架就有了基本的样子。
而使用webpack4.x则完全不同,它移除了内置的CommonsChunkPlugin插件,引入了SplitChunksPlugin插件,这个插件满足了我们的需要,弥补了CommonsChunkPlugin的不足。
如果你想要解决之前的不足,去提取index, contacUs共有的模块,操作起来会很简单。正如上面的所列举的那样,我们有三个入口点index, aboutUs, contactUs,SplitChunksPlugin 插件会首先获取这三个入口点共有的代码块,然后建立一个文件,紧接着获取每两个入口点的共有代码块,然后将每个入口点独有的代码块单独形成一个文件。如果你使用了第三方库,就像上面我们使用的loadsh,它会将第三方入口代码块单独打包为一个文件。
配置文件webpack.config.js需要增加如下的代码:
···
optimization: {
splitChunks: {
chunks: 'all',
maxInitialRequests: 20,
maxAsyncRequests: 20,
minSize: 40
}
}
···
因为SplitChunksPlugin可以提取任意的入口点之间的共同代码,所以,我们就不需要使用vendors入口节点了。那么,为匹配生成不同的页面代码可以修改成如下:
const HtmlWebapckPlugin = require('html-webpack-plugin')
···
plugins: [
new HtmlWebapckPlugin({
filename: 'index.html',
chunks: ['index']
}),
new HtmlWebapckPlugin({
filename: 'aboutUs.html',
chunks: ['aboutUs']
}),
new HtmlWebapckPlugin({
filename: 'contactUs.html',
chunks: ['contactUs']
}),
]
···
可以发现结果越来越接近我们所想。但是这里还是存在一个问题,第三方库loadsh因为在入口点index, aboutUs中被分别引入,但是构建的结果却输出了两个第三方库文件,这不是我们想要的。这个问题怎么解决呢,因为html-webpack-plugin插件的chunks选项,支持多入口节点,所以,我们可以再单独创建一个第三方库的入口节点vendors。配置代码修改如下:
...
entry: {
index: ['./src/index.js', './src/utils/load.js'],
aboutUs: ['./src/aboutUs.js'],
contactUs: ['./src/contactUs.js','./src/utils/load.js'],
vendors: ['loadsh']
},
...
plugins: [
new HtmlWebapckPlugin({
filename: 'index.html',
chunks: ['index', 'vendors']
}),
new HtmlWebapckPlugin({
filename: 'aboutUs.html',
chunks: ['aboutUs', 'vendors']
}),
new HtmlWebapckPlugin({
filename: 'contactUs.html',
chunks: ['contactUs']
}),
],
...
注意:如果不同的入口点儿之间有依赖关系,如上面的index和vendors之间,因为index依赖于vendors,所以vendors要置于index之前。
这篇文章,说到这里基本上已经结束了。当然,webpack多页面应用的知识点还没有讲完,这些内容会放在后续的文章中详解。
来自:https://segmentfault.com/a/1190000017393930
图片常见的类型有jp(e)g,png,gif,包括现在普遍使用的svg以及webp。svg作为矢量图形,有一定的使用场景,而webp作为未来web开发的趋势,有一定的使用场景,比如:爱奇艺中的轮播图(carousel)中就是用webp,但其他的见到的不多。
利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求。但对于有多个子项目的应用,如果创建多个单页面
多页面vue应用中,在请求接口之前统一加上Loading作为未请求到数据之前的过渡展示。由于多页面未使用vuex做状态管理,只在入口统一注册了bus,所以此例子使用eventbus做事件通信。
公司有专门的审批系统,我现在做的后台管理系统需要接入,移动端和PC端都要有一个页面来展示业务信息。后端不给开俩项目(也确实没必要),所以打算用多页面来解决,PC和移动端放到一个项目里,然后打包到各自的文件夹
react-multi-page-app 是一个基于 webpack5 搭建的 react 多页面应用。为什么搭建多页面应用:多个页面之间业务互不关联,页面之间并没有共享的数据
现在很多脚手架基本上都是单页面入口的应用,比如create-react-app等,整个的入口就是src/index.js。即使是Next.js,可以使用next export,导出成一个个单独的 html 页面。但在编译时,依然是全量编译,作为本身是为同构直出量身定制的服务端框架
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!