详解如何使用webpack打包JS
时间:2019-04-20
本文章向大家介绍详解如何使用webpack打包JS,主要包括详解如何使用webpack打包JS使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如何使用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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 通过shell脚本抓取awr报告中的问题sql(r6笔记第78天)
- Tomcat 快速入门
- 服务器进程异常的原因分析(r6笔记第74天)
- Elastic 技术栈之 Filebeat
- Elastic 技术栈之 Logstash 基础
- 备库CPU使用异常优化(r6笔记第73天)
- 数据清理的遗留问题处理(二)(r6笔记第91天)
- Kaggle Titanic 生存预测比赛超完整笔记(上)
- 多系统交互中DBA需要实现的技术细节(r6笔记第90天)
- Kaggle Titanic 生存预测比赛超完整笔记(中)
- SDP(11):MongoDB-Engine功能实现
- SDP(10):文本式大数据运算环境-MongoDB-Engine功能设计
- Kaggle Titanic 生存预测比赛超完整笔记(下)
- SDP(9):MongoDB-Scala - data access and modeling
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LINUX中如何查看某个端口是否被占用的方法
- Android实现RecyclerView添加分割线的简便方法
- Android定时器Timer的停止和重启实现代码
- Ubuntu20.04开启root账户的方法步骤
- Android 将view 转换为Bitmap出现空指针问题解决办法
- Android ScrollView 下嵌套 ListView 或 GridView出现问题解决办法
- Ubuntu 安装cuda10.1驱动的实现步骤
- Android单例模式的几种方法总结
- android长截屏原理及实现代码
- Android 删除指定包名的App实例代码
- 在Ubuntu20.04 LTS中配置Java开发环境
- Android 加载GIF图最佳实践方案
- Android编程之方向传感器用法示例
- Ubuntu20.04安装cuda10.1的步骤(图文教程)
- Android的WebView与H5前端JS代码交互的实例代码