NPMとのWebPACK（リプリント）との関係：https://blog.csdn.net/cwh0908/article/details/90769823
NPMとWebPACKの関係（再版）
ピット前を取得また、プロジェクトの多くのサイズ長い時間前にあり、伝統的なフロントエンド開発され、ホイールを作成繰り返してきた。VUEと接触した後、VUE-CLI、ちょうどVUE-CLIは足場VUEプロジェクトで知った後に理解する必要があります迅速VUEを構築することができますモジュラープロジェクトNPM、内部機構に基づいているが、それはまだWebPACKのでVUEが詰め込まれている。しかし、WebPACKのNPM \ノード\ nodejsモジュラーフロントエンドにおけるこれらの高頻度語は常に愚かなポイントです\ 、それは公式の説明を参考に、今日いくつかの努力を取って、ホワイトペーパーを書くの神によって与えられたオンラインチュートリアルに答えて、それらの間の関係を不明確知らない、これらの概念を要約したり、高頻度語の間関係
WebPACKのは何？IS
WebPACKのリソースは、ツールをパッケージ化/フロントエンドの負荷です。それ依存の静的解析モジュール、指定されたルールに対応する静的リソース・モジュールのその後世代。WebPACKのパッカーモジュールを見ることができる。それを行うためには、（SCSS、活字体、など）を直接実行することはできません、あなたのプロジェクト構造を分析し、言語のJavaScriptモジュールを拡張し、いくつかの他のブラウザを見つけることで、変換とパッケージング適切なフォーマットへのブラウザのために。
中心的な役割WebPACKの
ページのロードまたは相互作用は、多数の要求を起動するときに、その後、最後の行にパックしていない場合は、モジュール式の開発を、我々は、モジュールの数を書き込みます。最適化のパフォーマンスに、そのようなWebPACKのパケッタイザを使用する必要がある要求の数を減らすために、統合モジュールをパケット化します。シンプルなVUEのプロジェクトと同様に、すべてのコンポーネントは、最終的にapp.jsにパッケージ化されます。
従来のモジュールに比べて入り口ファイルを再帰的にビルド依存関係グラフから、その出発に無差別パックパッカー、WebPACKのコアの強みの嘘を頼ります。、WebPACKの依存をコーミング複製したり、オンデマンドパッケージ化、大幅に削減冗長性を確保するために使用されていないバンドルを備えたモジュールを充填することによって。
それは何を意味するのでしょうか？初心者チュートリアル図↓から盗まれた図のfacie、
WebPACKのは、あなたが様々なパッケージ/モジュール（依存関係を持つモジュール）間の依存関係を扱うに役立つ静的ファイルとブラウザに1つまたは少数の静的ファイルにこれらの複雑な依存関係をパッケージ化することができるツールであり、アクセスの使用は、それが互換性を向上させることができますので、加えて、WebPACKのは、一部のブラウザでは、これにより、ブラウザの互換性の問題によってもたらされる新しい機能を減らし、サポートされる形式を変換することができ、新たな機能をサポートしていないかもしれません
まあ、我々は概念を持って、私たちを紹介し、WebPACKのは、あなたが実際にここにあなたのプロジェクトを取ることができますパッケージ化ツールを識別することができますブラウザの簡易版で、モジュラー開発プロジェクトとしてパッケージ化静的リソースを指しています
NPM？何で
導入WebPACKのは、我々は別に私のJS、CSS、HTMLファイルの書き込みを疑うことが、非常に良いああ、なぜ使用のWebPACKツール、複雑な構成。伝統的なフロントエンドの開発モードでは、私たちは本当に別のモードを書き込むことができますJS / CSS / HTMLファイルに従っているが、フロントエンドの開発で、コミュニティエンパワメント、フロントエンドライブラリやフレームワークは、新興の様々な、我々はプロジェクトを使用する場合があります多くの追加のライブラリは、どのように効果的にこれらのライブラリの導入は大きな問題で管理する、と私たちは使用に基づいていることを知っているの<script> HTMLの方法を紹介して、2つの欠点、第二の導入を繰り返すことになりますが存在する場合に、ライブラリファイルの数時間管理の多くは、大きな問題となっています。
開発の複雑さ、フロントエンドのコミュニティの実践の多くの出現を簡単にするために、このような状況に直面しました。モジュラーは、成功した実践の一つであり、NPMは、コミュニティで、今日生産される実際のノードコミュニティです
NPMは、3つの別々のコンポーネントで構成されます。
- ウェブサイト
- レジストリ（レジストリ）
- コマンドラインツール（CLI）
Webサイトは、パッケージ（パッケージ）を探して設定したパラメータと管理経験のNPMの開発者への主要な方法です。
レジストリは巨大なデータベースで、各パッケージ（パッケージ）については、保存してください。
CLIコマンドラインまたは端末を実行します。CLIを使用してNPMでの作業開発者。
一般来说提起npm有两个含义，一个是说npm官方网站，一个就是说npm包管理工具。npm社区或官网是一个巨大的Node生态系统，社区成员可以随意发布和安装npm生态中的包，也就是不用在重复造轮子了，别人造好了，你直接安装到你的项目中就可以使用，但是因为前面说了，当包引入数量很多时管理就成为了一个问题，这个就是npm为开发者行了方便之处，npm已经为你做好了依赖和版本的控制，也就是说使用npm可以让你从繁杂的依赖安装和版本冲突中解脱出来，进而关注你的业务而不是库的管理。
而webpack就是将你从npm中安装的包打包成更小的浏览器可读的静态资源，这里需要注意的是，webpack只是一个前端的打包工具，打包的是静态资源，和后台没有关系，虽然webpack依赖于node环境
what is node or nodejs？
其实node和nodejs两个概念没有太大差别，我个人认为唯一的区别就是，人们说起node的时候语境更多的是再说node环境，而说nodejs时更多的是在说node是一门可以提供后端能力的技术。本质上来说，node就是nodejs，nodejs就是node
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
node环境基于V8引擎提供了一种可以让JS代码跑在后端的能力，这就是node。其实这里的node本身和我们这篇讲的前端模块化没啥关系。但是因为npm是产生与node社区，node中也是通过npm来加载模块的，所以有必要说一下他们之间的关系。
npm 是 Node.js 官方提供的包管理工具，他已经成了 Node.js 包的标准发布平台，用于 Node.js 包的发布、传播、依赖控制
webpack npm node之间关系？
- webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包；
- webpack的运行依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说不依赖与node，只要有后台能力的都可以部署项目
- npm是于Node社区中产生的，是nodejs的官方包管理工具，当你下载安装好node的时候，npm cli 就自动安装好了
- 正是因为npm的包管理，使得项目可以模块化的开发，而模块化的开发带来的这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别，而手动处理又是非常繁琐的，这就是webpack工具存在的意义