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身份证验证超强脚本
Oct 26 Javascript
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
在nuxt中使用路由重定向的实例
Nov 06 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 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
JS 继承实例分析
2008/11/04 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
javascript实现右侧弹出“分享到”窗口效果
2016/02/01 Javascript
两种方法解决javascript url post 特殊字符转义 + & #
2016/04/13 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
js实现图片无缝循环轮播
2019/10/28 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
python实现360的字符显示界面
2014/02/21 Python
python中from module import * 的一个坑
2014/07/20 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
澳大利亚著名的纺织品品牌:Canningvale
2020/05/05 全球购物
如何写一个自定义标签
2012/12/28 面试题
个人委托书范本
2014/04/02 职场文书
课外小组活动总结
2014/08/27 职场文书
小学教师师德整改措施
2014/09/29 职场文书
优秀班组申报材料
2014/12/25 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
新西兰:最新留学学习计划书写作指南
2019/07/15 职场文书