了解下webpack的几个命令

【 webpack3.0.0刚刚出来  所以文章是跟着低版本 教程 操作熟悉  结果好多对不上喔】

六:了解下webpack的几个命令

  1. webpack         // 最基本的启动webpack的方法
  2. webpack -w      // 提供watch方法;实时进行打包更新
  3. webpack -p      // 对打包后的文件进行压缩
  4. webpack -d      // 提供source map,方便调式代码

我们下面来了解下 webpack -w

如下所示:

比如我在js文件里面随便增加一点代码后,保存后,再刷新页面即可可以看到代码生效了,无需重新运行webpack或者gulp,使用webpack -w 可以实时打包。 webpack -p 的含义是对进行打包后的文件进行压缩代码;比如我在之前使用chrome看打包后的代码如下:

如上可以看到,代码是未压缩的,但是当我在控制台命令行中运行 webpack -p 命令后,如下所示:

我们现在再到控制台上看下代码变成已经压缩后的代码了,如下所示:

webpack  -d 是提供未压缩之前的源码 方便代码中的调式;如下所示:

当我运行如上所示后,我们再来看看刚才已经压缩后的代码变成什么样子呢?如下所示:

如上代码可以看到 我们进行压缩后的代码,通过运行 webpack -d 命令后,即可还原未压缩的代码,这样的话就可以方便我们线上调式代码了。

我们再来看看目录下 会生成map文件,如下所示:

  可是我的不知道 在怎么了 没有生成map文件。

转载于:https://www.cnblogs.com/ertingbo/p/7057913.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将webpack更新到webpack5,你可以按照以下步骤进行操作: 1. 首先,确保你的项目已经安装了webpack4,并且项目中的webpack相关的依赖包已经经过优化。 2. 在开始升级之前,你需要了解webpack5的新特性和改动,以便确定是否会对你的项目产生影响。你可以查阅webpack5的官方文档,了解新版本的改进。 3. 接下来,你可以通过以下几个步骤来升级webpack: a. 首先,升级webpack的主要依赖包。你可以修改项目的package.json文件,将webpack相关的依赖包的版本号修改为webpack5对应的版本号。 b. 然后,运行npm install命令来安装新版本的依赖包。 c. 接下来,你需要根据你的项目需求和配置,逐步迁移你的webpack配置文件。由于webpack5引入了一些新的配置项和改动,你需要根据官方文档和你的项目需求,逐步修改和调整配置文件,以确保项目可以正常运行。 d. 最后,你可以运行项目,并进行测试和调试,以确保项目在升级到webpack5之后可以正常工作。 4. 在升级过程中,你可能会遇到一些兼容性问题或者其他异常情况。在这种情况下,你可以通过查阅webpack的官方文档、搜索相关的社区讨论或者咨询其他开发者的经验来解决问题。 总结起来,将webpack更新到webpack5的过程主要包括了解新版本的改进、升级依赖包、迁移配置文件和测试调试等步骤。希望这些步骤能帮助你成功地将webpack更新到webpack5,并实现项目的优化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值