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 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
封装了一个支持匿名函数的Javascript事件监听器
Jun 05 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
Dec 20 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
AngularJS基础 ng-class-odd 指令示例
Aug 01 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
JS script脚本中async和defer区别详解
Jun 24 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
过期软件破解办法实例详解
2017/01/04 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
简单的三步vuex入门
2018/05/20 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
微信开发之微信jssdk录音功能开发示例
2018/10/22 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
Python读取表格类型文件代码实例
2020/02/17 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Aurora London官网:奢华、负担得起的皮革手袋
2020/08/01 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
销售目标责任书
2014/07/23 职场文书
房屋买卖协议样本
2014/11/16 职场文书
中国合伙人观后感
2015/06/02 职场文书
初中同学会致辞
2015/08/01 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
vue动态绑定style样式
2022/04/20 Vue.js