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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
JQuery this 和 $(this) 的区别
Aug 23 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 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/06 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
2012/10/11 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
python线程池的实现实例
2013/11/18 Python
详解Python中的Cookie模块使用
2015/07/06 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
python机器学习之随机森林(七)
2018/03/26 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
Araks官网:纽约内衣品牌
2020/10/15 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
总经理岗位职责
2013/11/09 职场文书
初中生操行评语大全
2014/04/24 职场文书
工作岗位职责范本
2015/02/15 职场文书