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 相关文章推荐
javascript复制对象使用说明
Jun 28 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
JavaScript之iterable_动力节点Java学院整理
Jun 29 Javascript
微信小程序实现评论功能
Nov 28 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
Javascript var变量删除原理及实现
Aug 26 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 实例化类的一点摘记
2008/03/23 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php文件怎么打开 如何执行php文件
2011/12/21 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
Python实现求两个csv文件交集的方法
2017/09/06 Python
Python爬虫框架scrapy实现downloader_middleware设置proxy代理功能示例
2018/08/04 Python
Python Flask框架扩展操作示例
2019/05/03 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
国贸专业个人求职信分享
2013/12/04 职场文书
高中化学教学反思
2014/01/13 职场文书
学习标兵获奖感言
2014/02/20 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书