Webpack之NpmScript

Webpack中的Npm Script主要是承担执行任务的角色。(https://docs.npmjs.com/misc/scripts

                                      

首先,NPM(Node Package Management)是Node.js开发的各种包的管理器,而Npm Script则是NPM的内置功能之一。

一般是在package.json文件中使用script字段定义任务。script字段如下:

{
  "scripts": {
      "dev": "webpack-dev-server --open",
      "analyz": "NODE_ENV=production npm_config_report=true npm run deploy:prod"
   }
}
上述scripts字段实际是一个对象,其中的每一个属性都对应着相应的一段脚本。
$ npm run dev

如果输入如上指令,那实际上是执行了这段脚本:

$ webpack-dev-server --open

这样的话,在平常开发过程中,就不能用打过于冗长的代码,相当于把这段长代码封装成只有几个字母的简单指令,以便提升开发效率。

由于很多项目都把webpack都安装在自己的根目录下的”./node_modules/.bin/“下,但是要执行webpack,必须找到根目录下的webpack.config.js文件,非常不方便。因为可以在scripts字段下,这么写:

{
  "scripts": {
      "build": "./node_modules/.bin/webpack",
   }
}

这样就相当于告诉Npm Scripts直接在./node_modules/.bin/路径下,找到webpack并执行打包任务。在执行打包的时候,只要输入如下代码即可:

$ npm run build

接下来,分享几个在开发当中非常实用的脚本:

1. DevServer  

输入下面代码先进行安装:

$ npm i -D webpack-dev-server

然后在script字段这么写:

{
  "scripts": {
      "dev": "webpack-dev-server --open",
   }
}

使用这个相当于建立一个server,用于打开网页应用。


还有一个是webpack-bundle-analyzer (https://www.npmjs.com/package/webpack-bundle-analyzer)

分析bundle.js大小分区的一个使用工具:

$ npm i -D webpack-bundle-analyzer 

{
  "scripts": {
      "analyz": "NODE_ENV=production npm_config_report=true npm run deploy:prod"
   }
}

上图出自 https://www.npmjs.com/package/webpack-bundle-analyzer

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值