【npm,yarn,webpack】出包命令

我们在项目开发中，经常看到不同的出包命令。总结一下最常使用的这三个：npm run XXX, yarn run XXX, webpack {entry file} {destination for bundled file}。

npm和yarn都是用来管理包的工具，前者是微软的，后者是FaceBook的。webpack则是模块打包机。

目录

一、npm run XXX

二、yarn run XXX

三、webpack {entry file} {destination for bundled file}

---

一、npm run XXX

npm属于NodeJS的一个模块，是NodeJS的包管理器。只要电脑上安装了nodeJS，就可以使用npm命令来安装依赖。一行命令$npm install，就能安装别人已经写好了的模块。

一般我们在package.json文件里，需要在scripts里指定运行脚本命令。例如我们经常用到的编译出包命令$npm run build, 就是在package.json文件里对build指定了命令 “node build/build.js”：

package.json会将 $npm run build解析成node build/build.js,通过webpack的一系列配置及插件，将文件打包合并，并创建dist目录，放置编译打包后的文件。
又比如下面的设置指定npm run preinstall、npm run postinstall、npm run start、npm run test时，所要执行的命令；第一个和第二个命令打印出一句话，第三个命令启动了index.js文件，第四个命令用来补全文件名。

"scripts": {

"preinstall": "echo here it comes!",

"postinstall": "echo there it goes!",

"start": "node index.js",

"test": "tap test/*.js"

}

二、yarn run XXX

yarn属于新一代的包管理器，前期是为了解决npm里的一些问题：安装慢（于是用了并行安装），不可靠不能保持依赖包版本统一（于是有了锁定文件yarn.lock），不检查依赖完整性（于是有了一套自己的检查包完整性的机制），命令不简洁。但这些问题npm都处理了，因此yarn和npm已经可以说是差不多一样了。

三、webpack {entry file} {destination for bundled file}

Webpack 是基于配置的前端资源模块化管理和打包工具（模块化：可以把复杂的程序细化为小的文件）。它会根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack具体的工作方式，就是把项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
工作方式如下图：

如现在的命令$webpack {entry file} {destination for bundled file}, {entry file} 出填写入口文件的路径，比如main.js文件，{destination for bundled file}处填写打包文件的存放路径；填写路径的时候不用添加{}。

Webpack拥有很多其它的比较高级的功能，这些功能其实都可以通过命令行模式实现，但是正如前面提到的，这样不太方便且容易出错的，更好的办法是定义一个配置文件，这个配置文件其实也是一个简单的JavaScript模块，我们可以把所有的与打包相关的信息放在里面。

                                                                   

配置文件里，如果我们写入了入口文件路径和打包后文件的存放路径，再打包文件的时候，就不需要$webpack {entry file} {destination for bundled file}这么完整的命令了，直接在终端里运行webpack命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项。

参考资料

1. 三种出包命令npm, yarn, webpack的对比_npm run build是webpack吗_华为云PaaS服务小智的博客-CSDN博客