webpack4.x打包过程详解

更新时间：2018年07月18日 09:13:30 作者：youzhiningo

这篇文章主要介绍了webpack4.x打包过程详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

npm install webpack-cli -g

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

npm init -y

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

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

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

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

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

此时代码已经被压缩。

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript 监听textarea中按键事件
不同的浏览器中的事件监听机制是不同的，以onKeyPress事件为例。
2009-10-10
浅谈javascript中call()、apply()、bind()的用法
一直对Javascript中的apply/call/bind的用法很模糊，恰好看到了这篇文章。对三者之间的区别与联系算是有了比较清晰的认识。这里记录下来，分享给大家。
2015-04-04
js实现点击切换卡片功能
这篇文章主要为大家详细介绍了js实现点击切换卡片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
js实现tab切换效果实例
这篇文章主要介绍了js实现的tab标签切换效果，功能非常简单，实现了点击切换的效果，推荐给大家，有需要的小伙伴可以参考下。
2015-09-09
JavaScript中模拟实现jsonp
这篇文章主要介绍了JavaScript中模拟实现jsonp,本文直接给出实现代码,代码中包含详细注释,需要的朋友可以参考下
2015-06-06
js控件Kindeditor实现图片自动上传功能
这篇文章主要为大家详细介绍了js控件Kindeditor实现图片自动上传功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-06-06
js trim函数去空格函数与正则集锦
在javascript中处理文本框输入值的时候，经常要用到"去掉前后空白"的功能。用过jQuery的朋友都知道，jQuery提供了一个trim()这样的功能函数，可以很轻松帮我们实现这样的效果。
2009-11-11
用js实现图片旋转的两种方案
这篇文章主要给大家介绍了关于用js实现图片旋转的两种方案, 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转,需要的朋友可以参考下
2023-07-07
Bmail联系人飞来飞去效果
Bmail联系人飞来飞去效果...
2007-01-01
javascript读取文本节点方法小结
本篇文章主要介绍了javascript读取文本节点的方法，具有很好的参考价值，需要的朋友一起来看下吧
2016-12-12