vue.js - 请问，多页面、多站点如何打包？多主题切换如何打包？

问题描述

问 题

之前没接触过前端项目打包，最近在看 webpack ，但是有两个实际应用中的疑问：

1. webpack 是否支持多页面，多站点打包？

一个项目，由几个站点组成，每个站点下都有多个主体框架都不同的页面组成，如：

1、https://res.xxx.com/

• 放置一些共用的静态资源（js/css/图片），可以被其它站点使用；

2、 https://biz1.xxx.com/

• 提供一部分业务接口（如消息服务），并封装了 biz1.js 给其它站点调用；

• 该站点除了使用自己站点内部的资源，还引用了 https://res.xxx.com/ 中的资源；

• 该站点内部（多页面应用）还有些本站内部共用的 js ，根据不同操作/业务有不同页面（如，图表展示页面、用户操作界面、后台管理页面、……）。

3、 https://biz2.xxx.com/

• 提供（如预警服务）业务接口，并封装了 biz2.js 给其它站点调用，在 biz2.js 中又引入了 https://biz1.xxx.com/apis/v3/biz1.js 。

• 该站点除了使用自己站点内部的资源，还引用了 https://res.xxx.com/ 中的资源；

• 该站点内部（多页面应用）还有些本站内部共用的 js ，根据不同操作/业务有不同页面。

4、 https://home.xxx.com/

• 该站点对用户提供一些聚合的业务功能，同时引入了 https://biz1.xxx.com/apis/v3/biz1.js 和 https://biz2.xxx.com/apis/v3/biz2.js；

• 该站点除了使用自己站点内部的资源，还引用了 https://res.xxx.com/ 中的资源；

• 该站点内部（多页面应用）还有些本站内部共用的 js ，根据不同操作/业务有不同页面。

注：上面的域名地址 https://res.xxx.com/，https://biz1.xxx.com/，https://biz2.xxx.com/，https://home.xxx.com/ 并非固定；在不同的部署中，通过后台的配置数据传到前端。

2. 在组件化开发时，webpack 是否支持 css和图片 多主题打包？

• 客户需求，需要提供界面主题换肤功能，让用户能够即时切换界面样式；

• 如果按照传统的方式来处理是：不同主题提供不同的资源包，每个主题的css放一个资源包中（或者一个css文件），在切换主题时，切换不同css文件就可以了；

• 现在按照 React,Vue 组件的写法，每个组件的html,js,css写一块，打包时将这些聚合到一起，开发起来是方便/清晰不少，
  但是，感觉这种写法遇到主题换肤这样的需求时，就不知道怎么写，怎么打包了……

解决方案

第一个，我感觉webpack是可以做的，entry配置里是可以传多个入口js，然后就可以根据入口js依赖打包出每一个域名对应的js，然后public文件夹里写几个入口html文件，服务器配置一下就好了。我没试过，你可以试试。
第二个，跟webpack没关系。
2.1 自定义好换肤的 type-classname 其中type是动态的
2.2 页面所有的涉及到换肤相关的用redux来控制
redux设置一个默认的type肤色，点击换肤，redux替换这个type

`${this.props.type}-classname`

这篇关于vue.js - 请问，多页面、多站点如何打包？多主题切换如何打包？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！