三种出包命令npm, yarn, webpack的对比

在出包的时候，总是会在不同项目里看到不同的出包命令。但留心观察了一下，最常被使用的就是下面这三个：npm run XXX, yarn run XXX, webpack {entry file} {destination for bundled file}。

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

npm run XXX

npm属于NodeJS的一个模块，是NodeJS的包管理器。只要电脑上安装了nodeJS，就可以使用npm命令来安装依赖。一行命令$npm install，就能安装好别人已经写好了的模块。
我们的
一般我们在package.json文件里，需要在scripts字段里指定运行脚本命令的npm命令行缩写。
比如我们经常会用到的编译出包命令$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. https://www.npmjs.com/
2. https://yarnpkg.com/
3. 前端小白，自学前端，请问下npm，yarn，webpack三者之间的区别和关系是什么？ - 知乎
4. https://xianweb.github.io/webpack/page5.html

 转载自华为云社区，文章作者 gentle_zhou