文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

webpack3.X中如何实现多页面打包

2024-04-02 19:55

关注

这篇文章将为大家详细讲解有关webpack3.X中如何实现多页面打包,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

单页面打包

我们知道要打包单页面的方法,很简单,配置入口,和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;


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对象;

关于“webpack3.X中如何实现多页面打包”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯