简单使用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 模拟用户单击事件
Dec 31 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
javascript ie6兼容position:fixed实现思路
Apr 01 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
js+cavans实现图片滑块验证
Sep 29 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
使用PHP获取网络文件的实现代码
2010/01/01 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
python进阶教程之异常处理
2014/08/30 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
Python中查看文件名和文件路径
2017/03/31 Python
python版本单链表实现代码
2018/09/28 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
介绍一下except的用法和作用
2015/01/22 面试题
实习医生自我评价
2013/09/22 职场文书
远程研修随笔感言
2014/02/10 职场文书
户外拓展活动方案
2014/02/11 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
六年级作文之关于梦
2019/10/22 职场文书
奥特曼十大神器:奥特手镯在榜,第一是贝利亚的神器
2022/03/18 日漫