webpack4+react多页面架构

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://segmentfault.com/a/1190000016799921

原文地址：https://www.cnblogs.com/lalalagq/p/9901575.html

时间： 2024-07-29 19:46:59

webpack4+react多页面架构的相关文章

webpack+react多页面开发(二)-终极架构

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

浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

本文转载自:http://www.cnblogs.com/kenkofox/p/4643760.html 心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs

AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无

深入浅出的webpack4构建工具--webpack4+react构建环境(二十)

下面我们来配置下webpack4+react的开发环境,之前都是针对webpack4+vue的.下面我们也是在之前项目结构的基础之上进行配置下. 首先看下如下是我为 webpack4+react 基本的项目结构如下: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有的依赖包 | |--- app | | |---src | | | |-- index.jsx # 项目的入口文件jsx | | | |

浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首

前端开发工程师 - 04.页面架构 - CSS Reset &amp; 布局解决方案 &amp; 响应式 &amp; 页面优化 &amp;规范与模块化

04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 多列布局 全屏布局 第3章--响应式 浏览网页使用的设备屏幕大小迥异,如何保证页面在不同设备上都正常显示呢? --  解决方法:响应式 优点:无需为不同设备编写对应的页面 --> 降低开发成本.维护成本 缺点:页面中某些部分在某些设备上会被隐藏(资源加载了,但是只是用CSS隐藏了) 为什么在手机端的页面会很小呢? 所有的移动端的页面都引入了viewport视窗 刚开始所有的元素都是加载到一个比较大的viewport视

页面架构

使用Axure设计App,使用WebStorm开发 – 构建页面架构 在本文中,将继续介绍在 WebStorm 中开发,去实现App的功能需求. 就像盖房子一样,第一步需要把整个工程的页面结构先勾勒出来,先让各个页面流转起来,然后再去细化每个页面. 所有工程代码放在了 https://github.com/zhangsichu/DeliveryApp 同时上篇文章中创建的初始化工程,也Tag了 TheInitialProject,您可以使用 Git checkout 这个Tag, 也可以直接到:

react及flux架构范例Todomvc分析

react及flux架构范例Todomvc分析 通过分析flux-todomvc源码,学习如何通过react构建web程序,了解编写react应用程序的一般步骤,同时掌握Flux的单向数据流动架构思想 关于react react一个最吸引我的特性是组件,它是模块化的,所有的组件是独立的,又可以通过嵌套来构建更大型的组件,一个个小组件经过层层组装,最终形成web应用程序,它让我开始重新思考如何去构建大型的web应用程序. 关于Flux Flux是一个思想而非框架,强调数据自上而下传递的单向流动理念

《页面架构》课堂交流区问题汇总

本课程为网易云课堂 - - 前端开发工程师 - - <页面架构>学习总结 居中布局 问题一:水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? ???? 解决方案: 方法一:子元素设置:display:inline-block + vertical-align:bottom <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g