webpack4+react多页面架构-低调大师

webpack4+react多页面架构

2018-10-14 543

webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多，单页面打包通常是将业务js，css打包到同一个html文件中，整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口，比如不同的h5活动，或者需要支持seo的官方网站，都需要多个不同的html，webpack-react-multi-page架构让你可以实现多页面架构，在项目开发中保证每个页面都可以热更新并且打包后有清晰的文件层次结构。

Github地址

项目架构

技术使用

react16
webpack4
- html-webpack-plugin 生成html文件
- mini-css-extract-plugin css分离打包
- uglifyjs-webpack-plugin js压缩
- optimize-css-assets-webpack-plugin css压缩
es6
babel
node
- opn 打开浏览器
- compression 开启gzip压缩
- express
git

目录结构github

|-- webpack-react-multi-page //项目
    |-- dist //编译生产目录
        |-- index
            |-- index.css
            |-- index.js
        |-- about
            |-- about.css
            |-- about.js
        |-- images
        |-- index.html
        |-- about.html
    |-- node_modules //node包
    |-- src //开发目录
        |-- index //index页面打包入口
            |-- images/
            |-- app.js// index业务js
            |-- index.scss
            |-- index.js //index页面js入口
        |-- about //about页面打包入口
            |-- images/
            |-- app.js// about业务js
            |-- index.scss
            |-- index.js //about页面js入口
        |-- template.html // html模板 
        |-- style.scss //公共scss
    |-- webpackConfig //在webpack中使用
        |-- getEntry.js //获取入口
        |-- getFilepath.js //遍历文件夹
        |-- htmlconfig.js //每个页面html注入数据
    |-- package.json
    |-- .gitignore
    |-- webpack.config.js //webpack配置文件
    |-- www.js //生产启动程序

wiki

webpack单页面打包配置

webpack.config.js

module.exports = (env, argv) => ({
    entry: ".src/index.js",
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            ...
       ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "首页",
            filename:"index.html",
            favicon:"", 
            template: "./src/template.html", 
        })
    ]
});

这样就可以在dist文件夹下打包出一个下面这样的文件

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>首页</title>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="bundle.js"></script>
    </body>
</html>

webpack多页面打包配置

webpack 的entry支持两种种格式

打包单个文件

module.exports = {
    entry: '.src/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js' 
  }
};

在dist下打包出一个bundle.js

打包出多个文件

module.exports = {
    entry: {
        index:"./src/index.js",
        about:"./src/about.js"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js' 
    }
};

上面在dist下打包出两个与entry属性名对应的index.js,about.js这两个文件

将每个js挂载到相应的html文件上

这里我们需要用到html-webpack-plugin这个webpack插件,每添加一个页面就需要在plugins添加一个new HtmlWebpackPlugin({....})

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = (env, argv) => ({
    entry: {
        index:"./src/index.js",
        about:"./src/about.js"
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js' 
    }
    ....//其他配置
    plugins: [
        new HtmlWebpackPlugin(
            {
            filename:"index.html",//生成的index.html
            template: "./src/template.html",}) //模板
            chunks:["index"]
            }),
    new HtmlWebpackPlugin(
            {
                filename:"about.html",//生成的index.html
            template: "./src/template.html",}) //模板
            chunks:["about"]
            })
    ]
})

html-webpack-plugin会通过template.html模板生成对应的filename名的html文件，并一并打包到output中对应的文件夹下，注意，所有打包的文件都是对应到output中path这个目录下，也包括html。这里的chunks需要注意，它是确定该html需要引入哪个js，如果没写的话，默认会引出所有打包的js，当然这不是我们想要的。

上面的配置最终可以在dist下打包出下面的文件结构

|-- dist
    |-- index.js
    |-- about.js
    |-- index.html //内挂载index.js
    |-- about.html //内挂载about.js

通过上面这样的配置，再加上devServer，我们已经可以实现多页面的配置开发了，但这样很不智能，因为你每增加一个页面，就要在wepback里面配置一次，会非常繁琐，所以我们来优化下，让我们只专注于开发页面，配置交给webpack.

wehbpack多页面配置优化

我们看下src下面的文件结构

|-- src
    |-- index
        |-- app.js
        |-- index.scss
        |-- index.js
    |-- about
        |-- app.js
        |-- index.scss
        |-- index.js

src下面每个文件夹对应一个html页面的js业务，如果我们直接把文件夹对应入口js找到并把他们合并生成对应的entry，那是不是就不用手动写entry了呢,再把对应的html-webpack-plugin通过src下目录遍历出来，就可以生成对应的页面。

这样一个完整的多页面架构配置就完成了，完整代码参考项目code

微信关注我们

原文链接：https://yq.aliyun.com/articles/668654

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Dubbo/HSF在Service Mesh下的思考和方案

开头 Service Mesh这个“热”词是2016年9月被“造”出来，而今年2018年更是被称为service Mesh的关键之年，各家大公司都希望能在这个思潮下领先一步。今天我也分享阿里中间件在这方面的观点，思考和实践。考虑到有些人没了解过Dubbo(集团内以HSF为主)和Servicemesh，先简单介绍下这两个词。Dubbo应该是国内最受欢迎的远程服务框架，在Github上有超过2w的star数，也是阿里分布式架构互联互通的核心所在。跟Dubbo一样，servicemesh也是面向服务互联互通这一问题域，是云原生技术栈的核心之一；大家可以简单理解service mesh就是云原生组织定义的微服务架构解决理念。Dubbo是实现框架，融入servcemesh理念就是我们今天分享的。现状和挑战当前Dubbo支撑的阿里分布式应用内支

2018-10-15

710

本文是大型分布式网站架构的技术总结，文末有分布式架构设计33精讲资料~ 一、大型网站架构特点用户多，分布广泛大流量，高并发海量数据，服务高可用安全环境恶劣，易受网络攻击功能多，变更快，频繁发布从小到大，渐进发展以用户为中心免费服务，付费体验二、大型网站架构目标高性能：提供快速的访问体验。高可用：网站服务一直可以正常访问。可伸缩：通过硬件增加/减少，提高/降低处理能力。安全性：提供网站安全访问和数据加密，安全存储等策略。扩展性：方便的通过新增/移除方式，增加/减少新的功能/模块。敏捷性：随需应变，快速响应；三、大型网站架构模式分层：一般可分为，应用层，服务层，数据层，管理层，分析层；分割：一般按照业务/模块/功能特点进行划分，比如应用层分为首页，用户中心。分布式：将应用分开部署（比如多台物理机），通过远程调用协同工作。集群：一个应用/模块/功能部署多份（如：多台物理机），通过负载均衡共同提供对外访问。缓存：将数据放在距离应用或用户最近的位置，加快访问速度。异步：将同步的操作异步化。客户端发出请求，不等待服务端响应，等服务端处理完毕后，使用通知或...

2018-10-15

601

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。