webpack多入口多出口的实现方法


Posted in Javascript onAugust 17, 2018

webpack是一个优秀的打包平台, 可以把sass, 图片, 字体等静态资源全部打包到js中

作者最近在改造一个传统的静态网站, 为了减少http请求, 其中一个策略就是,把单个静态网页对应的多个静态资源(如字体, css, 图片, js), 打包输出到一个js文件中, 然后让每个html与对应独立的js相关联就可以了

我在网上找了webpack配置的相关资料, html与js的对应关系都是, "一对一", "多对一", 但很少有"多对多"的实现

但经过一番折腾, 最终还是被我配置出来了,这里分享一下配置文件相关的语法

//entry入口文件支持json的形式
  entry: {
    "static/pc/js/index": "./webStatic/pc/js/index.js",
    "static/pc/js/article-details": "./webStatic/pc/js/article-details.js",
    "static/mobile/js/index": "./webStatic/mobile/js/index.js",
    "static/mobile/js/article-details": "./webStatic/mobile/js/article-details.js"
  },
  output: {
    path: path.resolve(__dirname, ''),
    //filename前面我们可以使用一个变量[name],这个就表示获取entry里面的key作为文件名加在前面
    filename: '[name].js'
  }

配置说明

根目录下 webStatic 为源码放置的位置, 根目录下 static 为js输出的的位置

配置文件共进行了四个映射: webStatic/pc/js/index.js 输出到 static/pc/js/index.js , ./webStatic/pc/js/article-details.js 输出到 static/pc/js/article-details.js , ./webStatic/mobile/js/index.js 输出到 static/mobile/js/index.js , ./webStatic/mobile/js/article-details.js 输出到 static/mobile/js/article-details.js

以后添加其它映射, 只需在 entry 内,按照格式添加即可(对着抄就行)

小结:

对古老的网站进行维护, 短时间内用 react 或 vue 组件化重写全部页面不太现实,但用webpack做个打包, 还是可行性的, 配置好webpack多入口多出口,只需对网站进行少量的改动, 就可以愉快的用scss, es6, 等语法写网站了

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

Javascript 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Vue异步加载about组件
Oct 31 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 #Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 #Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 #Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 #Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 #Javascript
React中使用async validator进行表单验证的实例代码
Aug 17 #Javascript
JavaScript实现构造json数组的方法分析
Aug 17 #Javascript
You might like
PHP生成静态页面详解
2006/11/19 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
tagName的使用,留一笔
2006/06/26 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python中dir函数用法分析
2015/04/17 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Python字符串的一些操作方法总结
2019/06/10 Python
Python中栈、队列与优先级队列的实现方法
2019/06/30 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
承诺书的格式范文
2014/03/28 职场文书
治超工作实施方案
2014/05/04 职场文书
五一活动标语
2014/06/30 职场文书
入党介绍人意见2015
2015/06/01 职场文书
勤俭节约主题班会
2015/08/13 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js