nrm，cnpm，npm使用笔记

前提条件是已经安装好了node.js文件

1、安装nrm命令：npm i nrm -g

安装webpack命令：npm i webpack -g

安装nrm命令：npm i nrm -g

2、利用nrm查看所用当前的镜像地址命令：nrm ls

切换镜像地址命令：nrm use taobao

3、npm下载插件命令：npm install ***（插件名称）

4、查看npm基本配置命令：npm config list

查看所有配置命令：npm config list -l

5、vscode的新项目启动步骤：

npm初始化后装插件命令：npm init -y

第一步初始化npm：npm init -y(执行后生成

package.json文件)

第二步开始装jquery：npm i jquery -S

6、vscode项目中创建文件夹（config、dist、src）：

$ mkdir config dist src

安装项目中的webpack:

$ npm i webpack -D

***********************************************

7、出现这个问题：Error: Cannot find module

'webpack-cli/bin/config-yargs'

解决办法：

webpack版本为4.0,已经安装过webpack-cli.网上找到

答案说webpack和webpack-cli要一起安装,如果已经安

装过webpack,可以使用如下命令重新安装，在执行npm

run server即可解决问题:

$ npm add webpack-cli webpack -D

8、删除了项目依赖包node_modules后；可以用一下命令重

新导入当前项目依赖包：

$cnpm i

9、如果想要打包处理 css 文件，需要安装

cnpm i style-loader css-loader -D

在入口js文件中配置：

module:{//这里可以配置所有第三方模块

rules:[

//配置出来.css文件的第三方loader规则

{test:/\.css$/,use:['style-loader','css-loader']},

]

}

10、在指定文件夹创建文件(分别dist和src文件夹下面创建

一个index.html文件和index.js文件)：

$ touch dist/index.html src/index.js

11、webpack4.x中打包默认找src/index.js作为默认入口

，可以直接在终端中输入命令webpack 将当前的内容进

行一个简单的打包：

$ webpack

12、$ webpack会提示警告解决问题如下：

mode是webpack中独有的，有两种打包环境，

一个是开发环境：development

另外一个是生产环境：production

***打包的时候输入

**webpack --mode="development"

或者webpack --mode=production就不会出现警告提示

了

总结：

webpack4.x中打包默认找src/index.js作为默认入口，

可以直接在终端中输入命令webpack 将当前的内容进行

一个简单的打包：

回车即可编译

安装webpack-dev-server 这个工具，来实现自动打包

编译的功能：

npm i webpack-dev-server -D

// 1. 运行 npm i webpack-dev-server -D 把这个工

具安装到项目的本地开发依赖

// 2. 安装完毕后，这个 工具的用法， 和 webpack

命令的用法，完全一样

配置出口入口

webpack基本参数设置：

3. 由于，我们是在项目中，本地安装的 webpack-

dev-server ， 所以，无法把它当作 脚本命令，在

powershell 终端中直接运行；（只有那些 安装到 全局

-g 的工具，才能在 终端中正常执行）

4. 注意： webpack-dev-server 这个工具，如果想

要正常运行，要求，在本地项目中，必须安装 webpack

5. webpack-dev-server 帮我们打包生成的

bundle.js 文件，并没有存放到 实际的 物理磁盘上；

而是，直接托管到了 电脑的内存中，所以，我们在 项

目根目录中，根本找不到 这个打包好的 bundle.js;

6. 我们可以认为， webpack-dev-server 把打包好

的 文件，以一种虚拟的形式，托管到了 咱们项目的 根

目录中，虽然我们看不到它，但是，可以认为， 和

dist src node_modules 平级，有一个看不见的文

件，叫做 bundle.js

*************************

Module build failed: Error: Cannot find module '模块名'

解决办法：

cnpm install 模块名