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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
php中的观察者模式
2010/03/24 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
删除DataFrame中值全为NaN或者包含有NaN的列或行方法
2018/11/06 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
中秋节国旗下演讲稿
2014/09/13 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
长城导游词300字
2015/01/30 职场文书
iPhone13再次曝光
2021/04/15 数码科技
Java spring单点登录系统
2021/09/04 Java/Android
Python实现仓库管理系统
2022/05/30 Python
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers