npm 、webpack 、 vue-cli

什么是Node.js  以及npm

简单的来讲 Node.js 就是运行在服务端的JavaScript，基于Chrome V8 引擎的。

npm 是Node.js 的包管理工具。

npm的安装和更新

Node.js下载安装   Node.js 官网下载安装。npm自带的包管理工具。

查看安装版本信息：

　　--  node -v  查看Node.js 版本信息

　　--  npm -v  查看npm版本信息

更新npm到指定版本：

　　--  npm install npm@5.3.0 -g

　　-- npm install npm@latest -g 更新最新的稳定版本

npm 经常使用操做

以前咱们用JQuery或者Bootstrap用cdn 或者直接手动下载并放入项目，并且要管理版本。

有了npm，咱们管理本身的依赖包以及版本更加简单。

到本身项目目录下，进行如下命令：

　　-- npm init -y    输入-y使用默认配置项 生成package.json文件。

　　-- npm i jquery@0.0.0   简写install 为 i 下载依赖  不写@ 默认最新版本

　　-- npm uninstall jquery  卸载依赖包

　　-- npm update jquery   更新依赖包

　　-- npm list  列出已安装的依赖

　　-- npm install webpack --D 保存为开发环境依赖

　　-- 老版本须要 --save 参数 如今不须要了

咱们的项目目录下会生成一个 node_modules 目录，咱们用npm下的包会在这个目录下。

咱们全部的依赖信息放在package.json文件中，包括咱们全部的依赖以及版本。

若是咱们删掉 node_modules目录，可使用 npm i  来下载全部依赖。

npm 经常使用配置项

当咱们用npm init 的时候用了参数 -y，若是不用-y咱们能够进行一些配置。

在咱们的package.json文件中有不少配置项

　　-- name  项目名字 中间不能有空格只能用小写

　　-- version  项目版本

　　-- description   项目描述信息

　　-- main  项目的入口文件

　　-- scripts 指定命令的快捷方式 npm run test     test是scripts里的键名 值为具体命令

　　-- author 做者

　　-- license  许可证

　　-- dependencies  生成环境依赖的包以及版本信息

　　-- devDependencies  开发环境的依赖

webpack3

webpack是什么

webpack是一个模块打包器，它将根据模块的依赖关系进行静态分析，

而后将这些模块按照指定的规则生成静态资源。

那么，咱们为何要用这个东西呢~~由于前端的包袱太多，历史遗留问题过重~~~脑补吧......

安装和配置

webpack是跑在Node.js环境下的，因此肯定本身有node环境。

安装方式：

　　-- npm install webpack -g  全局安装

　　-- webpack  <要打包文件>  <打包后文件>     全局这种方式进行打包

　　-- npm install webpack   在本身的项目下 npm init 后在下载webpack 这就是局部安装

　　-- node_modules/.bin/webpack <要打包文件>  <打包后文件>   项目里要打包文件是入口文件

　　-- 路径太长 太烦 能够自定义命令  在package.json 文件的 scripts下面自定义

entry 和 output

entry 入口文件  output 出口文件

上面咱们自定义命令的时候 命令太长了~~并且咱们命令太多的时候咱们须要每次都自定义多条命令~~

咱们能够把命令写在webpack.config.js文件中~~

module.export = { // 全部的入口文件 entry: { home: './main.js', login: './login.js', }, // 出口文件 output: { filename: '[name].bundle.js', path: __dirname + '/dist', } } // backage.json 下的scripts scripts: { "pack": "node_moudles/.bin/webpack --watch" } // 运行命令 npm run pack webpack.config.js

webpack4

webpack的新特性

1, webpack不在单独使用，须要webpack-cli

　　-- 全局安装  npm install webpack webpack-cli -g -D

　　-- 局部安装  npm install webpack webpack-cli -D

2, 增长了模式区分 （development, production）

　　--webpack --mode development/production 进行模式切换

　　-- development 开发者模式 打包默认不压缩代码

　　-- production  生产者模式 上线时使用，压缩代码。 默认是这个模式

3，固定入口目录为src，与入口默认文件index.js，打包后文件在新增的dist目录下

　　-- 当只有一个入口文件也就是src/index.js时，无需增长webpack.config.js

4，多入口以及多出口

entry: { // 多入口 a: "./src/js/index.js", b: "./src/js/index2.js", } output: { // 多出口 path: path.resolve(__dirname, 'dist'), filename: './js/[name].bundle.js' } webpack.config.js

vue-cli

vue-cli是官方提供的快速构建这个单页面应用的脚手架。

根据官方文档中的构件流程：

　　-- 前提是已经安装了node.js 不然npm都用不了

　　-- 1，使用npm全局安装vue-cli 

　　　　　　npm install -g vue-cli

　　-- 2, 安装完成后在本身的工做空间里

　　　　　　vue init webpack vue-demo  

　　　　输入命令后进入安装阶段，须要用户输入一些信息 这里省略了.....

　　-- 3，切换到咱们的项目目录下 

　　　　　　cd vue-demo

　　　　　　npm run dev

目录结构：

　　-- build 里面是一些操做文件，使用npm run * 时其实执行的就是这里的文件

　　-- config 配置文件，执行文件须要的配置信息

　　-- src 资源文件 全部的组件以及全部的图片 都在这个文件夹下

　　-- node_modules  项目依赖包

　　-- static 静态资源

　　-- package.json   依赖包的json文件

其实这里面命令不少~咱们在后续项目中应用到再说~~~

若是在其项目中报错，先把npm升级到最新版本，而后删掉项目中的node_modules文件夹，在执行下面的命令：

 若是报.json错误，：