webpack4+react多页面架构的实现


Posted in Javascript onOctober 25, 2018

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

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

Javascript 相关文章推荐
JavaScript 模拟用户单击事件
Dec 31 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 #Javascript
代码整洁之道(重构)
Oct 25 #Javascript
Vue使用NPM方式搭建项目
Oct 25 #Javascript
小程序云开发实战小结
Oct 25 #Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 #Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 #Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 #Javascript
You might like
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP MVC模式在网站架构中的实现分析
2010/03/04 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
深入理解react-router 路由的实现原理
2018/09/26 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python实现web方式logview的方法
2015/08/10 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
详细的大学生创业计划书模板
2014/01/27 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
党的群众路线教育实践活动个人对照检查材料(校长)
2014/11/05 职场文书
文明医院的标语集锦!
2019/07/24 职场文书