webpack4+react多页面架构的实现

2024-10-08 15:10:03

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

浅谈webpack+react多页面开发终极架构

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

写这个的初衷是很难找一个简洁的项目脚手架,很多脚手架都有很多依赖,光看依赖就要很久,所以自己参照网上的内容,弄个这么一个简单的多页面的脚手架. 利用creat-react-app 新建一个react应用 npm install -g create-react-app 然后创建一个项目 create-react-app demo create-react-app会自动初始化一个脚手架并安装 React 项目的各种必要依赖,如果在过程中出现网络问题,请用cnpm淘宝镜像安装. 然后我们进入项目并启动
webpack4 + react 搭建多页面应用示例

webpack 升级到4之后还没好好的同步一个可实用的webpack架子,接下来用webpack4来搭建一个简单的react的多界面应用,废话不说直接撸码创建工程 $ mkdir demo && cd demo $ npm init -y webpack 配置安装react + babel 依赖 $ npm i -S react@16.3.0 react-dom@16.3.0 $ npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-de
webpack4+react多页面架构的实现

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

前言本文主要给大家介绍了关于nginx配置React静态页面的相关内容,文中给大家详细介绍了关于nginx的安装以及一些基本操作,然后给大家分享了React 静态页面 nginx 配置简洁版的示例代码,下面话不多说了,来一起看看详细的介绍吧. 关于nginx的安装启动以及80端口被占用的解决方法,大家也可以参考这篇文章:http://www.jb51.net/article/110291.htm 第一步:安装 1.http://nginx.org/en/download.html 下载 2.t
react实现页面水印效果的全过程

目录前言 1.使用示例 2.实现过程 3.组件代码总结前言 1.为什么选用svg 而不是cavans? 因为cavans 在高分辨率屏幕下,需要根据 devicePixelRatio做宽高的适配,不然就会很模糊,而svg是矢量图,原生支持各种分辨率,不会产生模糊的情况. 1.使用示例 import React from 'react' import ReactDOM from 'react-dom' import './index.css' import WaterMarkContent
react 实现页面代码分割、按需加载的方法

虽然一直有做 react 相关的优化,按需加载.dll 分离.服务端渲染,但是从来没有从路由代码分割这一块入手过,昨天在本地开发时没有测试成功,今天又搞了下,已经部署到线上环境了,今天就这个记录一下. 修改配置开发环境:webpack@v3 .react-router@v4 安装依赖: $ yarn add babel-plugin-syntax-dynamic-import -dev 修改 .babelrc 文件:在 plugins 中添加 "syntax-dynamic-import&qu
详解react native页面间传递数据的几种方式

1. 利用react-native 事件DeviceEventEmitter 监听广播应用场景: - 表单提交页面, A页面跳转到B页面选人, 然后返回A页面, 需要将B页面选择的数据传回A页面. - 多个多媒体来回切换播放,暂停后二次继续播放等问题. 代码如下: A页面 componentDidMount() { // 利用DeviceEventEmitter 监听 concactAdd事件 this.subscription = DeviceEventEmitter.addListener
Shopee在React Native 架构方面的探索及发展历程

目录 1. 背景 2. 发展历程 2.1 第一阶段:单 bundle 集中开发模式 2.2 第二阶段:单 bundle 多业务组开发模式 2.3 第三阶段:多 bundle 中心化架构模式 3. 去中心的 RN 架构模型 3.1 独立 JS 运行时 3.2 开发流程 3.3 构建流程 3.4 发布流程 4. 系统设计 4.2 bundle 生命周期管理 4.2.1 客户端版本控制 4.2.2 灰度和回滚 4.3 系统效能提升 4.3.1 差分增量 4.3.2 多场景入口体积优化 4.3.3 一站
详解webpack4多入口、多页面项目构建案例

趁工作之余从零构建了一个webpack4.x多页面应用程序.过程中也遇到一些坑,就记录下来了. webpack核心概念 Entry:入口,Webpack 执行构建的第一步将从 Entry 开始. Module:模块,在 Webpack 里一切皆模块,一个模块对应着一个文件.Webpack 会从配置的 Entry 开始递归找出所有依赖的模块. Chunk:代码块,一个 Chunk 由多个模块组合而成,用于代码合并与分割. Loader:模块转换器,用于把模块原内容按照需求转换成新内容. Plugi

webpack4+react多页面架构的实现

相关推荐

随机推荐