webpack4.x打包过程详解


Posted in Javascript onJuly 18, 2018

一、全局安装 webpack-cli 脚手架

npm install webpack-cli -g

二、新建一个项目wp,并在wp目录下初始化一个package.json文件。

npm init -y

在wp目录下新建一个src目录,并在该目录下新建一个index.js 作为入口文件

webpack4.x打包过程详解

webpack4.x 给我们提供了两种打包模式:

development 为开发模式
production 为生产模式,打包出的 main.js 代码自动压缩

我们可以直接使用命令 webpack --mode development 进行开发模式打包

webpack4.x打包过程详解 

webpack4.x打包过程详解 

我们使用生产模式webpack --mode production 打包

webpack4.x打包过程详解 

此时代码已经被压缩。

不管哪种模式,我们每次打包都使用 webpack --mode development 或者 webpack --mode production 都有点麻烦,我们可以修改下package.json文件里面的 scripts 属性:

"dev": "webpack --mode development",
"build: "webpack --mode production"

最后我们就可以使用 npm run dev 进行开发模式打包,使用 npm run build 进行生产模式打包。

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

Javascript 相关文章推荐
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
Django与Vue语法的冲突问题完美解决方法
Dec 14 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
深入理解Node内建模块和对象
Mar 12 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 #Javascript
Vue隐藏显示、只读实例代码
Jul 18 #Javascript
详解vue中axios的封装
Jul 18 #Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 #Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 #Javascript
使用Vue实现图片上传的三种方式
Jul 17 #Javascript
vue的token刷新处理的方法
Jul 17 #Javascript
You might like
PHP获得数组交集与差集的方法
2015/06/10 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
Javascript模板技术
2007/04/27 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
Vue filter介绍及其使用详解
2017/10/21 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
初三新学期计划书
2014/05/03 职场文书
汽修专业自荐信
2014/07/07 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
通知格式
2015/04/27 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
Python面试不修改数组找出重复的数字
2022/05/20 Python