node webpack配置

node webpack配置

NodeJS、NPM安装配置步骤(windows版本)

 

• 1

 

分步阅读

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的使用包管理器 npm来管理所有模块的安装、配置、删除等操作，使用起来非常方便，但是想要配置好npm的使用环境还是稍微有点复杂，下面跟着我一起来学习在windows系统上配置NodeJS和NPM吧。

工具/原料

• Windows10 专业版

安装NodeJS和NPM

1. 1

打开NodeJS的官网，默认的情况主页就提供了Windows版本的下载链接，我们下载8.9.4 LTS版，LTS代表长期支持版本，一般新手建议使用这个版本，因为这个版本使用的人最多，出问题能找到解决方案的概率较大。如下图所示：

 

1. 2

下载完成后双击下载好的nodejs-v8.9.4-x64文件开始安装，点击next进入下一步，勾选同意协议，继续下一步。然后选择安装的位置，默认是在C盘，改成D盘安装，这是个好习惯，建议保持。然后进入模块配置步骤。

 

 

 

 

1. 3

这一步是选择安装哪些模块，默认是全部安装，对于新手来说建议全部安装。点开那个add path选项前面的+号，我们看到，会主动把NodeJS和NPM这两个模块的命令路径添加到系统路径里，对于我们来说就非常方便了。点击next继续下一步，然后确认信息，点击Install开始安装，然后程序就开始复制文件等一系列步骤。一直到安装完毕。

 

 

 

1. 4

安装完毕后点击finish结束安装进程，然后在桌面图标上点右键，点运行。输入cmd后敲回车，在打开的命令行界面，依次输入命令：

node -v

npm -v

如果正确输出版本号，说明我们的NodeJS和NPM就安装好了，如下图所示：

 

 

 

 

END

配置NodeJS和NPM

1. 并不是说NodeJS和NPM安装好了以后就能直接使用了，这也是新手经常犯的一个错误之一。因为默认情况下，NPM安装的模块并不会安装到NodeJS的程序目录，比如上面安装的时候我们设置的D:\Program Files\nodejs\目录，我们用个示例来看一下，我们先用npm安装一个cluster模块，如下面第一张图所示，执行命令：

npm install cluster

从图中可以看到，默认情况下把一下信息保存到C:\Users\v1\目录下，我们打开这个目录看看。可以看到这个目录底下有个node_modules目录，点开一看，如下面第二张图所示：

 

 

1. 可以看到把cluster目录装到了这个目录下面，这就说明，如果不修改npm的模块安装目录，那么它默认情况下都会安装到这里，随着你测试开发各种不同的项目，安装的模块越来越多，那么这个文件夹的体积会越来越大，直到占满你的C盘。这就是为什么要修改npm的配置的原因。

 

 

1. 这里我们要分两步，第一步修改NPM的缓存目录和全局目录路径，将对应的模块目录改到D盘nodejs的安装目录，第二步是配置npm和nodejs的环境变量，这样nodejs才能正确地调用对应的模块。

我们先来做第一步，在D盘nodejs目录下创建两个目录，分别是node_cache和node_global，这是用来放安装过程的缓存文件以及最终的模块配置位置。配置完成后，执行下面这两个命令：

npm config set prefix "D:\Program Files\nodejs\node_global"npm config set cache "D:\Program Files\nodejs\node_cache"

将npm的全局模块目录和缓存目录配置到我们刚才创建的那两个目录：

 

 

1. 然后我们打开cmd命令行界面，在使用命令安装刚才的cluster模块，命令如下：

npm install cluster -g

然后打开刚才创建的node_global目录，可以看到此时cluster目录就安装到这个目录底下了。

 

 

1. 然后我们来配置npm的环境变量和nodejs的环境变量。在计算机图标上点右键，选属性，然后点击高级系统配置，弹出来的新窗口右下角有个环境路径，点击去，就能看到环境路径的配置界面，我们点击新建。然后在弹出来的窗口里，变量名填：NODE_PATH

变量值填：D:\Program Files\nodejs\node_modules\

填写好后点确定，然后就能看到我们配置好的NPM环境路径。

 

 

 

 

 

1. 此时还需要修改一些nodejs默认的模块调用路径，因为模块的安装位置变了，如果nodejs的命令还到原来的位置去找，肯定是找不到安装的模块了。我们在环境变量窗口，选择Path，然后点击右下角的编辑，然后选择npm那个。点击右边的编辑，将其修改为：D:\Program Files\nodejs\node_global\然后点确定，保存这个配置

。

 

 

 

1. 这个时候所有的配置工作才算完成了，然后打开一个新的cmd窗口。先输入命令：

node

进入nodejs的交互式命令控制台，然后输入：

require('cluster')

如果能正常输出cluster模块的信息，说明上面的所有配置就算生效了。

 

1. 我们还需要做的最后一个工作是，将npm的模块下载仓库从默认的国外站点改为国内的站点，这样下载模块的速度才能比较快，只需要一个命令即可，命令是：

npm --registry https://registry.npm.taobao.org install cluster

上面的命令是临时使用国内一家npm源的地址来安装cluster模块。从下面图中可以看到，速度非常快。只用了不到0.8秒。而我们上面第一次安装的时候用了差不多3秒多，速度快了3倍多。

如果想一直使用这个源的地址，那么可以使用下面这个命令来配置。

npm install -g cnpm --registry=registry_url

registry_url指的是国内提供的一些npm仓库地址，常用的有：

https://registry.npm.taobao.org

http://r.cnpmjs.org/

这两个都可以使用。如下面第二张图所示，配置好国内源后，安装一个较大的模块express，只用了不到6秒多一点，速度提升还是非常可观的。至此，nodejs和npm在windows上的配置就全部完毕。

 

 

创建项目初始化

创建文件夹

webpack安装的两种方式

1. 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
2. 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

初步使用webpack打包构建列表隔行变色案例

1. 运行npm init初始化项目，使用npm管理项目中的依赖包
2. 创建项目基本的目录结构
3. 使用cnpm i jquery --save安装jquery类库
4. 创建main.js并书写各行变色的代码逻辑：

// 导入jquery类库 import $ from 'jquery' // 设置偶数行背景色，索引从0开始，0是偶数 $('#list li:even').css('backgroundColor','lightblue'); // 设置奇数行背景色 $('#list li:odd').css('backgroundColor','pink');

1. 直接在页面上引用main.js会报错，因为浏览器不认识import这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
2. 运行webpack 入口文件路径 输出文件路径对main.js进行处理：

webpack src/js/main.js dist/bundle.js

使用webpack的配置文件简化打包时候的命令

1. 在项目根目录中创建webpack.config.js
2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

// 导入处理路径的模块 var path = require('path'); // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理 module.exports = { entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件 output: { // 配置输出选项 path: path.resolve(__dirname, 'dist'), // 配置输出的路径 filename: 'bundle.js' // 配置输出的文件名 } }

之后报错：

 

全局安装webpack

：cnpm install webpack -g

 

安装web-cli：npm install --save-dev webpack-cli -g

webpack -h

npm install webpack-cli -D

npm install -D

因为webpack版本过高命令过时了所以是下面这个

webpack .\src\app.js -o .\dist\bundle.js --mode development