The relationship between the NPM and webpack (reprint): https://blog.csdn.net/cwh0908/article/details/90769823
The relationship between the NPM and webpack (reprint)
Getting the front of the pit is also a long time before many the size of the project, are the traditional front-end development, have been repeating create the wheel; after contact with VUE, vue-cli have to understand after just know vue-cli is a scaffolding vue project, can quickly build a vue is based on a modular project npm, the internal mechanism but it is still packed vue With webpack; but webpack npm \ node \ nodejs these high-frequency words in a modular front end is always silly points \ unclear, do not know the relationship between them, it took some effort today consulted official explanation and answer online tutorials given by the god of writing a white paper, summarize these concepts or between high-frequency words relationship
IS WebPACK the What?
Webpack resource is a front-end load / packaging tools. It Static analysis module of a dependency, then the generation of static resource modules corresponding to the specified rules. That WebPack packer module can be seen: it to do is analyze your project structure, expand the language JavaScript module and find some other browser can not run directly (Scss, TypeScript, etc.), and converts and packaging for the browser to the appropriate format.
webpack central role of
modular development, we will write a number of modules, if you do not pack on the last line, then when the page loads or interaction, will launch a large number of requests. To optimize performance, it is necessary to use such webpack packetizer packetizes integration module, to reduce the number of requests. Like simple vue project, all components will eventually be packaged into a app.js in.
Compared to traditional modules rely indiscriminately packed packer, webpack core strengths lies in its departure from the entrance file recursively build dependency graph. By combing dependence, WebPACK packing module comprising a bundle that does not duplicate or used for on-demand packaged, greatly reduced redundancy.
What does that mean? FIG facie, stolen from the novice tutorial FIG ↓
webpack is a tool, which can help you handle dependencies between various packages / modules (modules with dependencies), static files and package these complex dependencies into one or a few static files to the browser access use; in addition, webpack because it can improve compatibility, some browsers may not support the new features supported formats can be converted, thereby reducing the new features brought by the browser compatibility issues
Well, introduce us, we have a concept, webpack is a packaged tool that can help you take your project here actually refers to static resources packaged as modular development project by simple version of the browser can be identified
what is npm?
introduced webpack, we may doubt my JS, CSS, HTML file write separately, very good ah, why use webpack tool, the complex configuration. In the traditional front-end development mode, we really are in accordance with the JS / CSS / HTML file separate mode can be written, but with the development of the front end, Community Empowerment, a variety of front-end libraries and frameworks emerging, we might use project many additional libraries, how to effectively manage the introduction of these libraries is a big problem, and we know that based on the use <script> in HTML introduced way, there are two drawbacks, will repeat the introduction of a second, when the number of library files a lot of time management has become a major problem.
Faced with this situation, in order to simplify the complexity of development, the emergence of a lot of front-end community practices. Modular is one of the successful practice, and npm is produced today in the community is actually node community
npm consists of three separate components:
- website
- Registry (registry)
- Command-line tool (CLI)
Web site is the main way to set parameters and management experience npm developers look for a package (package).
The registry is a huge database, save for each package (package) information.
Run CLI command line or terminal. Developers working with npm through the CLI.
一般来说提起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工具存在的意义