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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
jquery提示 "object expected"的解决方法
Dec 13 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
Aug 10 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
vue登录路由验证的实现
Dec 13 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 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 新手入门教程
2009/08/03 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
JavaScript高级程序设计
2006/12/29 Javascript
利用js对象弹出一个层
2008/03/26 Javascript
innerhtml用法 innertext用法 以及innerHTML与innertext的区别
2009/10/26 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
JS实现进入页面时渐变背景色的方法
2015/02/25 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
AngularJs每天学习之总体介绍
2017/08/07 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
python3实现全角和半角字符转换的方法示例
2017/09/21 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
python 实现矩阵填充0的例子
2019/11/29 Python
python入门之基础语法学习笔记
2020/02/08 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
招商专员岗位职责
2014/02/08 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
三方协议书
2015/01/27 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Mysql文件存储图文详解
2021/06/01 MySQL