简单了解webpack和npm

2018-01-27 本文已影响0人 zy懒人漫游

如何全局安装一个 node 应用?

npm install -g

package.json 有什么作用？

npm上发布包时，需要npm init生成package.json文件
package.json中的信息来描述这个包,并提供包所需要的依赖

{
  "name": "gulp-use",//发布npm包的时候需要的，表示npm包的名字
  "version": "1.0.0",//包的版本号
  "description": "",//对于这个包的简单描述
  "main": "index.js",//入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"//
  },
  "keywords": [],// 关键字
  "author": "",//作者
  "license": "ISC",//
  "devDependencies": {
    "gulp": "^3.9.1",//所依赖的其他包的版本号
 
  }
}

npm install --save app 与 npm install --save-dev app有什么区别?

npm install --save app: 保存需要加载的依赖的信息到package.json里面,该模块使用时，该依赖被调用
npm install --save-dev app: 开发测试时使用的依赖，当需要测试时，可以调用该依赖

node_modules的查找路径是怎样的?

该模块的同级目录下查找nodule_modules => if(没有) 向上一级查找 => if(没有) 再向上一级 ...=> 直到找到根目录下

webpack是什么？和其他同类型工具比有什么优势？

市面上已经存在的模块管理和打包工具并不适合大型的项目，尤其单页面 Web 应用程序。最紧迫的原因是如何在一个大规模的代码库中，维护各种模块资源的分割和存放，维护它们之间的依赖关系，并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源。

这些已有的模块化工具并不能很好的完成如下的目标：

将依赖树拆分成按需加载的块
初始化加载的耗时尽量少
各种静态资源都可以视作模块
将第三方库整合成模块的能力
可以自定义打包逻辑的能力
适合大项目，无论是单页还是多页的 Web 应用

和其他同类型工具比有什么优势？

webpack的优势：

1.代码拆分

Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

2.Loader

Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

3.智能解析

Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。

4.插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

5.快速运行

Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

npm script是什么？如何使用？

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。

"scripts": {
    "start": "node ./bin/www",
    "webpack": "webpack --config ./src/webpack.config.js",
    "watch": "onchange \"src/**/*.js\"  \"src/**/*.less\" -- npm run webpack"
  }

输入npm run webpack或者npm run watch就可以执行对应的脚本
但是比如start 或 bulid 等，可以直接npm start