详解如何使用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 相关文章推荐
javasript实现密码的隐藏与显示
May 08 Javascript
在JavaScript中使用NaN值的方法
Jun 05 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
Vue指令的钩子函数使用方法
Mar 20 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
利用Node.js如何实现文件循环覆写
Apr 05 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
vue中的计算属性和侦听属性
Nov 06 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
curl和libcurl的区别简介
2015/07/01 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
js函数般调用正则
2008/04/08 Javascript
javascript demo 基本技巧
2009/12/18 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
在javascript中对于DOM的加强
2013/04/11 Javascript
嵌入式iframe子页面与父页面js通信的方法
2015/01/20 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
python实现字符串完美拆分split()的方法
2019/07/16 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
Python 实现集合Set的示例
2020/12/21 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
美国农场鲜花速递:The Bouqs
2018/07/13 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
别名指示符是什么
2012/10/08 面试题
总经理助理岗位职责
2013/11/08 职场文书
酒店人事专员岗位职责
2013/12/19 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
党风廉政承诺书2016
2016/03/25 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
MySQL复制问题的三个参数分析
2021/04/07 MySQL