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