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 模块名

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181122G0L7L500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券