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和s3captche实现一个水果名字的验证
Aug 14 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
用js实现in_array的方法
Nov 05 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
JavaScript SHA512加密算法详细代码
Oct 06 Javascript
AngularJS自定义插件实现网站用户引导功能示例
Nov 07 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
javascript简单链式调用案例分析
May 10 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 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
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
JavaScript学习笔记之DOM基础操作实例小结
2019/01/09 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
原生JavaScript实现进度条
2021/02/19 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
基于Django用户认证系统详解
2018/02/21 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
美国一家主营日韩美妆护肤品的在线商店:iMomoko
2016/09/11 全球购物
美国电视购物:QVC
2017/02/06 全球购物
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
人力资源部培训专员岗位职责
2014/01/02 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
街道社区活动报告
2015/02/05 职场文书
党员发展大会主持词
2015/07/03 职场文书
青年教师听课心得体会
2016/01/15 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书