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 相关文章推荐
常用js脚本
Dec 03 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
Jul 22 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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中iconv函数使用方法
2008/05/24 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
加随机数引入脚本不让浏览器读取缓存
2014/09/04 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
url传递的参数值中包含&时,url自动截断问题的解决方法
2016/08/02 Javascript
jQuery 遍历map()方法详解
2016/11/04 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
vue2.0 datepicker使用方法
2018/02/04 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
Python的Django框架中的Context使用
2015/07/15 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
python不同版本的_new_不同点总结
2020/12/09 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
主管职责范文
2013/11/09 职场文书
致共产党员倡议书
2014/04/16 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
关爱残疾人标语
2014/06/25 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis
springboot应用服务启动事件的监听实现
2022/04/06 Java/Android