详解如何使用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 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
15个款优秀的 jQuery 图片特效插件推荐
Nov 21 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 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
根德YB400的电路分析
2021/03/02 无线电
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
浅析js中取绝对值的2种方法
2013/07/09 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
Python读取stdin方法实例
2019/05/24 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
关于初始种子自动选取的区域生长实例(python+opencv)
2020/01/16 Python
python 弧度与角度互转实例
2020/04/15 Python
html5唤起app的方法
2017/11/30 HTML / CSS
2014新年寄语
2014/01/20 职场文书
中考标语大全
2014/06/05 职场文书
课外访万家心得体会
2014/09/03 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技
win10搭建配置ftp服务器的方法
2022/08/05 Servers