详解如何使用webpack打包JS


Posted in Javascript onJune 21, 2018

如何使用webpack打包JS

我们在命令行中输入:webpack -h看看webpack的命令行大全

Usage: webpack-cli [options]
    webpack-cli [options] --entry <entry> --output <output>
    webpack-cli [options] <entries...> --output <output>

webpack告诉我们,用webpack进行打包有三种方法:

1.新建为webpack.config.js命名的文件,可以直接webpack命令打包

2.webpack 入口文件<app.js> -o 输出文件<bundle.js>

3.webpack --config 你自定义的文件名字<webpack-default.js>

新建一个目录,新建一个sum.js文件,这个文件主要是用es6 module暴露一个加法函数方法:

// sum.js
export default function sum(a, b) {
  return a + b;
}

然后新建一个app.js入口文件(webpack要打包这个文件)

// app.js

// es6 module规范
import sum from './sum'

// 调用
console.log('sum(23,24) = ', sum(23, 24));

下面进行打包:

webpack app.js -o bundle.js

如果打包成功显示:

Hash: 7e137d767d2665688484
Version: webpack 4.5.0
Time: 588ms
Built at: 2018-6-20 20:30:06
   Asset    Size Chunks       Chunk Names
0.bundle.js 188 bytes    0 [emitted]
 bundle.js  1.84 KiB    1 [emitted] main
Entrypoint main = bundle.js
  [0] ./app.js + 1 modules 466 bytes {1} [built]
    | ./app.js 411 bytes [built]
    | ./sum.js 55 bytes [built]
  [1] ./minus.js 54 bytes {1} [built]
  [2] ./muti.js 114 bytes {0} [built]

GitHub 我们一起学习webpack地址:https://github.com/liangfengbo/learning-webpack

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

Javascript 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
如何测量vue应用运行时的性能
Jun 21 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
vue自定义一个v-model的实现代码
Jun 21 #Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 #Javascript
浅析Vue 生命周期
Jun 21 #Javascript
vue数组对象排序的实现代码
Jun 20 #Javascript
vue项目实现github在线预览功能
Jun 20 #Javascript
node thread.sleep实现示例
Jun 20 #Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 #Javascript
You might like
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php使用google地图应用实例
2014/12/31 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
js实现自定义路由
2017/02/04 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
H5手机端多文件上传预览插件
2017/04/21 Javascript
Bootstrap模态对话框用法简单示例
2018/08/31 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
Python自动扫雷实现方法
2015/07/25 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
暑期培训随笔感言
2014/03/10 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
起诉书格式范文
2015/05/20 职场文书
上班旷工检讨书
2015/08/15 职场文书
医院岗前培训心得体会
2016/01/08 职场文书