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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
js 轮播效果实例分享
Dec 28 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
JS typeof fn === 'function' && fn()详解
Aug 22 Javascript
JS如何监听div的resize事件详解
Dec 03 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 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python中asyncore的用法实例
2014/09/29 Python
wxPython中listbox用法实例详解
2015/06/01 Python
用python制作游戏外挂
2018/01/04 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python datetime中strptime用法详解
2019/08/29 Python
python如何实现图片压缩
2020/09/11 Python
python 实现表情识别
2020/11/21 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
Shein英国:女性时尚网上商店
2019/04/10 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
报关简历自我评价怎么写
2013/09/19 职场文书
银行实习人员自我鉴定
2013/09/22 职场文书
自主招生自荐信范文
2013/12/04 职场文书
通信生自我鉴定
2014/01/18 职场文书
倡议书格式范文
2014/04/14 职场文书
小学生操行评语
2014/04/22 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers