简单使用webpack打包文件的实现


Posted in Javascript onOctober 29, 2019

没有安装node的同学请先安装node。

安装

npm i -g webpack

编写配置文件

假设我们有两个js文件需要打包,1.js和mode1.js,我们在1.js里面引入mode1.js模块

mode1.js 模块:

export default {
  sum(...arg){
    let s=0;
    arg.forEach(item=>{
      s+=item;
    });
    return s
  }
}

一个简单的求和函数,default的意思是把整个模块都暴露出去

1.js:

import common from './mode1'

window.onload=function(){
  document.onclick=function(){
    alert(common.sum(12,43,65,8,7,98))
  }
}

其中的common是自己命名的

我们把1.js作为入口文件编写webpack配置文件,对webpack的操作都在这个配置文件里面写,默认名字webpack.config.js

webpack.config.js:

const pathlib = require('path');
module.exports = {
  entry: {
    index:'./src/1',
    ym:'./src/2'
  },
  output: {
    path: pathlib.resolve('dest/'),
    filename: '[name].bundle.js'
  }
}

这里面有两个核心参数entry和output入口和出口,入口可以是多入口,如果写成多入口就写成json文件,出口的path选项是配置输出的文件路径,必须是绝对路径,所以这里引了path模块,filename是输出文件的名字,[name].是占位符,输出多文件入口的时候用到、

编译

最后在项目目录执行 webpack 编译命令就可以了

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

Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
vue 解决异步数据更新问题
Oct 29 #Javascript
VUE实现强制渲染,强制更新
Oct 29 #Javascript
js实现贪吃蛇小游戏
Oct 29 #Javascript
浅谈vue异步数据影响页面渲染
Oct 29 #Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 #Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 #Javascript
vue设置一开始进入的页面教程
Oct 28 #Javascript
You might like
支付宝接口开发集成支付环境小结
2015/03/17 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
请说出几个常用的异常类
2013/01/08 面试题
留学自荐信
2013/10/10 职场文书
销售简历自我评价
2014/01/24 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
科技活动周标语
2014/10/08 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python