首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onNovember 11, 2018

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

概览

key value
名称 webpack+react多页面架构
描述 简单易用的多页面自动化开发架构
开发者 leinov
发布日期 2018-11-07
版本 2.0
仓库 github地址

特性

  • 支持多页面同时热加载开发
  • 自动识别新创建页面
  • 每个页面生成个性化信息
  • 分类打包
  • 灵活扩展

安装&使用

// clone
git clone git@github.com:leinov/webpack-react-multi-page.git

// 安装依赖包
npm install

// 开发
npm run dev

// 编译打包
npm run build

// 启动生产页面
npm start

新创建页面在src下添加文件夹并创建pageinfo.json 然后npm run dev 即可

|-- src
  |-- index/
  |-- page2/
    |-- index.js
    |-- pageinfo.json

项目架构

技术使用

  • 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
    • fs
  • git

目录结构

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

wiki

webpack打包单页面应用

webpack在单页面打包上应用广泛，以create-react-app为首的接触脚手架众多，单页面打包通常指的是将业务js，css打包到同一个html文件中，整个项目只有一个html文件入口

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' index.js,about.js这两个文件
 }
};

上面在dist下打包出两个与entry属性名对应的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' index.js,about.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:["index"]
      })
  ]
})

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自己.

webpack多页面配置优化

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

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

src下面每个文件夹对应一个html页面的js业务，如果我们直接把文件夹对应入口js找到并把他们合并生成对应的entry，那是不是就不用手动写entry了呢，是的!

遍历文件目录

/* eslint-env node */

/**
 * @file: getFilePath.js 遍历文件目录
 * @author: leinov
 * @date: 2018-10-11
 */

const fs = require("fs");

/**
 * 【遍历某文件下的文件目录】
 *
 * @param {String} path 路径
 * @returns {Array} ["about","index"]
 */
module.exports = function getFilePath(path){
  let fileArr = [];
  let existpath = fs.existsSync(path); //是否存在目录
  if(existpath){
    let readdirSync = fs.readdirSync(path); //获取目录下所有文件
    readdirSync.map((item)=>{
      let currentPath = path + "/" + item;
      let isDirector = fs.statSync(currentPath).isDirectory(); //判断是不是一个文件夹
      if(isDirector && item !== "component"){ // component目录下为组件 需要排除
        fileArr.push(item);
      }
    });
    return fileArr;
  }
};

比如在src下有index页面项目，about项目 遍历结果为["index","about"];

遍历生成打包入口数组

/* eslint-env node */
/**
 * @file: getEntry.js 获取entry文件入口
 * @author: leinov
 * @date: 2018-10-11
 * @update: 2018-11-04 优化入口方法 调用getFilePath
 */
const getFilePath = require("./getFilepath");
/**
 * 【获取entry文件入口】
 *
 * @param {String} path 引入根路径
 * @returns {Object} 返回的entry { "about/aoubt":"./src/about/about.js",...}
 */
module.exports = function getEnty(path){
  let entry = {};
  getFilePath(path).map((item)=>{
    /**
     * 下面输出格式为{"about/about":"./src/aobout/index.js"}
     * 这样目的是为了将js打包到对应的文件夹下
     */
    entry[`${item}/${item}`] = `${path}/${item}/index.js`;
  });
  return entry;
};

这里我们使用getFilepath获取的数组，在获取到每个目录下的js文件，组合成一个js入口文件的如下格式的对象。

{
  "index/index":"./src/index/index.js",
  "about/about":"./src/about/index.js"
}

在webpack中使用getEntry

const getEntry = require("./webpackConfig/getEntry");
const entry = getEntry();

module.exports = (env, argv) => ({
  entry: entry,
})

这样我们就自动获取到了entry

html-webpack-plugin自动配置

因为每个页面都需要配置一个html，而且每个页面的标题，关键字，描述等信息可能不同，所以我们在每个页面文件夹下创建一个pageinfo.json,通过fs模块获取到json里信息再遍历到对应得html-webpack-plugin中生成一个html插件数组。

index/pageinfo.json 生成index.html页面信息

{
  "title":"首页",
   "keywords":"webpack多页面"
}

about/pageinfo.json 生成about.html页面信息供

{
  "title":"关于页面",
  "keywords":"webpack多页面关于页面"
}

通过fs遍历读取并生成HtmlWebpackPlugin数组供webpack使用

遍历html插件数组

/**
 * @file htmlconfig.js 页面html配置
 * @author:leinov
 * @date: 2018-10-09
 * @update: 2018-11-05
 * @use: 动态配置html页面，获取src下每个文件下的pageinfo.json内容,解析到HtmlWebpackPlugin中
 */

const fs = require("fs");
const HtmlWebpackPlugin = require("html-webpack-plugin");//生成html文件
const getFilePath = require("./getFilepath");
let htmlArr = [];

getFilePath("./src").map((item)=>{
  let infoJson ={},infoData={};
  try{
    // 读取pageinfo.json文件内容，如果在页面目录下没有找到pageinfo.json 捕获异常
    infoJson = fs.readFileSync(`src/${item}/pageinfo.json`,"utf-8");//
    infoData = JSON.parse(infoJson);
  }catch(err){
    infoData = {};
  }
  htmlArr.push(new HtmlWebpackPlugin({
    title:infoData.title ? infoData.title : "webpack,react多页面架构",
    meta:{
      keywords: infoData.keywords ? infoData.keywords : "webpack，react，github",
      description:infoData.description ? infoData.description : "这是一个webpack，react多页面架构"
    },
    chunks:[`${item}/${item}`], //引入的js
    template: "./src/template.html",
    filename : item == "index" ? "index.html" : `${item}/index.html`, //html位置
    minify:{//压缩html
      collapseWhitespace: true,
      preserveLineBreaks: true
    },
  }));
});

module.exports = htmlArr;

wbpack终极配置

const path = require("path");
const getEntry = require("./webpackConfig/getEntry"); //入口配置
const entry = getEntry("./src");
const htmlArr =require("./webpackConfig/htmlConfig");// html配置

module.exports = (env, argv) => ({
  entry: entry
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
  ....//其他配置
  devServer: {
  port: 3100,
  open: true,
  },
  plugins: [
    ...htmlArr
  ]
})

这样一个自动化完整的多页面架构配置就完成了，如果我们要新创建一个页面

1.在src下创建一个文件目录
2.在新创建的文件目录下添加index.js（必须，因为是webpack打包入口文件）
3.在新创建文件夹下添加pageinfo.json（非必须） 供html插件使用
4.npm run dev开发

完整代码参考项目code

版本

版本 日期 分支 备注
2.0 2018-11-08 master 优化html插件自动化
1.0 2018-10-07 version1.0 第一版

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

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

- Author -

leinov

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Oct 15 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
使用javascript将时间转换成今天，昨天，前天等格式
Jun 25 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 #Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 #Javascript
vue组件从开发到发布的实现步骤
Nov 11 #Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 #Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 #Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
Nov 11 #Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 #Javascript
追加文本(1) 文字识别(1) 验证码(1) GCN(1) 裁剪图片(1) SFTP(3) Pytesseract(1) PIL(1) 匹配文本(1) 柱状图(1)
You might like
php json_encode奇怪问题说明
2011/09/27 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
从零开始学YII2框架（一）通过Composer安装Yii2框架
2014/08/20 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
一样的table？不一样的table(可编辑状态table)
2012/09/19 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
JavaScript常用函数工具集：lao-utils
2016/03/01 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python实现数据库并行读取和写入实例
2017/06/09 Python
儿童python练习实例
2018/05/27 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
澳大利亚的奢侈品牌：Oroton
2016/08/26 全球购物
世界领先的在线地板和建筑材料批发商：BuildDirect
2017/02/26 全球购物
实习单位评语
2014/04/26 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
Python Parser的用法
2021/05/12 Python
【海涛教你打DOTA】死灵飞龙第一视角解说
2022/04/01 DOTA