npm与webpack基础

【NPM】

 npm(Node Package Manager):Node包管理工具,Node自带NPM; 

 核心思想:代码仓库,在里面放所有需要被共享的代码;

 代码共享:
   1.早期主要靠网址共享代码;(bootcdn.cn)
   2.github兴起之后使用github上的下载功能;
   3.现在使用NPM;

 NPM使用:
   1.打开Node官网,下载Node;
   2.打开cmd命令提示符,进入目标文件夹;
   3.npm -v(--version)     查看版本信息;
   4.npm init -y(--yes)    初始化默认配置文件
   5.npm i(install) vue/vue@2.6.0  -S(--save)/-D(--save-dev)/-g(--global)
                           安装包(默认最新版本、默认-S(--save);不能同时存在一个包的多个版本,会被替换)
   6.npm uninstall vue     卸载包
   7.npm update vue        更新包
   8.npm info vue          查看包的版本
   9.npm install           根据package、package.lock恢复包
   10.npm list             查看已安装的所有包


 package.json文件:
   {
        "name": "NPM",                      //应用名
        "version": "1.0.0",                 //应用版本
        "description": "",                  //应用描述
        "main": "index.js",                 //程序的主入口文件
        "scripts": {                        //命令的快捷方式(可通过npm run test运行)
          "test": "echo \"Error: no test specified\" && exit 1"
        },
        "keywords": [],                     //关键字
        "author": "",                       //作者
        "license": "ISC",                   //许可证
        "dependencies": {                   //生产环境下的依赖包
          "vue": "^2.6.10"
        }
    }
 package.lock.json文件:锁定各包的具体版本号,由于package.json只能锁定大版本号;

【CNPM】

cnpm:淘宝镜像,由淘宝前端开发,中国的NPM,由于NPM服务器在国外,导致下载速度慢且易出现异常; 1.npm i cnpm -g --registry=https://registry.npm.taobao.org 在全局环境下安装CNPM 2.与NPM的区别:npm i vue 默认-S(--save),CNPM需要手动添加;

【Bower】

bower:也是一款包管理工具,安装依赖NPM;
与NPM的区别:Bower是专门针对前端的包管理工具;
            NPM包含前端和Node.js的包管理;

 Bower使用:
   1.npm install bower -g            在全局环境下安装Bower
   2.bower i vue#2.6.8               安装包
   3....其它用法与NPM相同

【webpack】

webpack:模块化打包工具;现在主流前端框架(Vue、React、Angular)的理想开发环境都是基于webpack;
webpack使用:
    1.npm i webpack@3.12.0 -g       全局安装(4.x中webpack和webpack-cli分开管理)
    2.npm init -y                   初始化配置文件
    3.npm i webpack@3.12.0 -D       局部安装(避免因电脑安装的webpack版本不同,导致的全局webpack的影响)
    4.在目标文件夹新建webpack.config.js
    let path = require('path');
    module.exports={
        entry:"./a",
        output:{        
            filename:"bundle.js",
            path:path.resolve(__dirname, 'dist/')  
        }
    }
    5.webpack           完成打包