webpack 3.X学习之多页面打包的方法


Posted in Javascript onSeptember 04, 2018

简介

我们开发不可能只写一个页面,每次都要写很多页面,这时为了开发效率,我们使用前端自动化工具webpack,那么webpack是如何打包页面的呢?又是如何打包多页面的呢?

单页面打包

我们知道要打包单页面的方法,很简单,配置入口,和html插件,

const HtmlWebpackPlugin = require('html-webpack-plugin');

const config = {
 entry:{
  index:'./src/index.js'
 },
 output:{
  path: path.join(__dirname, 'dist'),
  filename: 'js/index.js'
 }
 ...
 plugins:[
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: './src/index.html',
   hash: true,
   minify: {
    removeAttributeQuotes:true,
    removeComments: true,
    collapseWhitespace: true,
    removeScriptTypeAttributes:true,
    removeStyleLinkTypeAttributes:true
   }
  })
 ]
}

上面的配置就是打包一个单页面的代码,具体配置项的意思请参考HTMLWebpackPlugin;

如何打包多页面

在学了webpack之后,我的感受是我会配置webpack了,也能运行了,但是学习的过程中都是单页面的,那么多页是如何打包的呢?其实多页面的打包和单页面的打包的原理是一样的,只是多配置几个对应的入口,和出口,以及HtmlWebpackPlugin对象;当然你完全可以像下面这样:

const config = {
 entry:{
  index:'./src/index.js',
  info:'./src/index.js'
 },
 output:{
  path: path.join(__dirname, 'dist'),
  filename: 'js/[name].js'
 }
 ...
 plugins:[
  new HtmlWebpackPlugin({
   filename: 'index.html',
   template: './src/index.html',
   chunks:['index'],
   hash: true,
   minify: {
    removeAttributeQuotes:true,
    removeComments: true,
    collapseWhitespace: true,
    removeScriptTypeAttributes:true,
    removeStyleLinkTypeAttributes:true
   }
  }),
  new HtmlWebpackPlugin({
   filename: 'info.html',
   template: './src/info.html',
   hash: true,
   chunks:['info'],
   minify: {
    removeAttributeQuotes:true,
    removeComments: true,
    collapseWhitespace: true,
    removeScriptTypeAttributes:true,
    removeStyleLinkTypeAttributes:true
   }
  })
 ]
}

细心的你肯定发现我改变了几个地方,一是,把output.filename的‘js/index.js'变成了‘js/[name].js',这是因为我们是多页面,每个页面对应相应的js这样方便管理,二是,在HtmlWebpackPlugin对象中添加了chunks这个属性,chunk属性是让你选择对应的js模块;

上面这种写法当然是没有问题,这是只有两个页面无所谓,那么有十个甚至更多呢,我们一直做着重复的事,这不是我们程序员的风格,我们就是为了能够偷懒才做程序员的不是吗?(当然还有高工资(#^.^#)),接下来我们来抽离这些重复的事;

首先,我们通过Node的glob对象,来获取我们存在的html或js;

/**
*
* @param {string} globPath 文件的路径
* @returns entries
*/
function getView(globPath,flag){
 let files = glob.sync(globPath);

 let entries = {},
 entry, dirname, basename, pathname, extname;

 files.forEach(item => {
  entry = item;
  dirname = path.dirname(entry);//当前目录
  extname = path.extname(entry);//后缀
  basename = path.basename(entry, extname);//文件名
  pathname = path.join(dirname, basename);//文件路径
  if (extname === '.html') {
   entries[pathname] = './' + entry;
  } else if (extname === '.js') {
   entries[basename] = entry;
  }
 });

 return entries;
}

既然,我们已经有了getView()函数,可以获取html和js文件,那么我们就可以确定有多少个入口,和多少个页面;
let entriesObj = getView('./src/js/*.js');

let config = {
 entry:entriesObj,
 ...
}

上面我们就配置好了入口,不需要我们手动添加了,有多少js就有多少入口;

let pages = Object.keys(getView('./src/*html'));

pages.forEach(pathname => {
 let htmlname = pathname.split('src\\')[1];
 let conf = {
  filename: `${htmlname}.html`,
  template: `${pathname}.html`,
  hash: true,
  chunks:[htmlname],
  minify: {
   removeAttributeQuotes:true,
   removeComments: true,
   collapseWhitespace: true,
   removeScriptTypeAttributes:true,
   removeStyleLinkTypeAttributes:true
  }
 }

 config.plugins.push(new HtmlWebpackPlugin(conf));
});

最后,我们获取HTML页面,和添加对应页面的HTMLWebpackPlugin对象;

后记

通过以上的三个步骤,就可以配置好一个可以打包多页面的webpack工具;本人的水平比较有限,在书写的过程中,可能有很多说的比较模糊,请多多包涵,也请大神拍砖,多多指教

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

Javascript 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
js 对象使用的小技巧实例分析
Nov 08 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
JS获取并处理php数组的方法实例分析
Sep 04 #Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 #Javascript
vue form 表单提交后刷新页面的方法
Sep 04 #Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 #Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 #Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 #Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 #Javascript
You might like
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
Yii视图CGridView列表用法实例分析
2016/07/12 PHP
解决PHP上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
100多个基础常用JS函数和语法集合大全
2017/02/16 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
python如何随机生成高强度密码
2020/08/19 Python
python map比for循环快在哪
2020/09/21 Python
python安装sklearn模块的方法详解
2020/11/28 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
养殖项目策划书范文
2014/01/13 职场文书
民事申诉状范本
2015/05/20 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL