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 相关文章推荐
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
使用js 设置url参数
Jul 08 Javascript
node.js正则表达式获取网页中所有链接的代码实例
Jun 03 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
Jun 09 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
Sep 21 Javascript
浅谈让你的代码更简短,更整洁,更易读的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
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
在layer弹层layer.prompt中,修改placeholder的实现方法
2019/09/27 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
python实现跨文件全局变量的方法
2014/07/07 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python 实现多线程下载视频的代码
2019/11/15 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
学生个人求职自荐信格式
2013/09/23 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
大学毕业生个人总结
2015/02/28 职场文书
法制工作总结2015
2015/07/23 职场文书