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 相关文章推荐
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
javascript每日必学之封装
Feb 23 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
js实现自动锁屏功能
Jun 02 Javascript
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学习之正则表达式
2011/04/17 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
babel基本使用详解
2017/02/17 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
JavaScript实现的超简单计算器功能示例
2017/12/23 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
JavaScript实现tab栏切换效果
2020/03/16 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
bpython 功能强大的Python shell
2016/02/16 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
PyCharm-错误-找不到指定文件python.exe的解决方法
2019/07/01 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
重新定义牛仔布,100美元以下:Warp + Weft
2018/07/25 全球购物
什么是设计模式
2012/06/17 面试题
新郎婚宴答谢词
2014/01/19 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
养成教育主题班会
2015/08/13 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android