node和npm和webpack的安装及配置

最新推荐文章于 2024-05-07 03:20:24 发布
最新推荐文章于 2024-05-07 03:20:24 发布
阅读量701 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39940205/article/details/98735207
版权

1、官网下载node.js并安装在非C盘路径

2、安装cnpm(淘宝镜像)

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、安装nrm  命令 npm install nrm -g

nrm ls 查看所有可用的路径

4、切换到淘宝源 nrm use taobao

(cnpm安装完毕)

4、全局安装,  cnpm install webpack webpack-cli -g  

推荐全局指定版本安装 npm install webpack@3.6.0 -g  (4.x需要安装webpack-cli)

ps:卸载命令 npm uninstall webpack webpack-cli -g

5、webpack打包测试, webpacktest包有如下3个文件

手动打包步骤

a、进入webpacktest目录

b、进如cmd通过入口js进行打包生成build.js

c、在html中引入即可

使用webpack-dev-server自动打包步骤

a、新建webpack01目录,结构如下(复制webpacktest中的文件)

b、进入到webpack01目录安装插件

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装完成后会生成node_modules和package.json

c、在package.json中添加scripts

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

--line:自动刷新     --hot:热加载  --open:自动在默认浏览器打开  --port:指定端口

--host:指定服务器的ip,如果对外发布则填写公网ip地址,不填写默认127.0.0.1

d、添加webpack.config.js配置文件

//引用html-webpack-plugin插件，作用是根据html模板在内存生成html文件，它的工作原理是根据模板文件在内存中生成一个index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        path : __dirname+'/dist',  // 注意：__dirname表示webpack.config.js所在目录的绝对路径
        filename:'build.js'		   //输出文件
    },
    devtool: 'eval-source-map',   //开启debugger断点调试
    plugins:[
        new htmlwp({
            title: '首页',  //生成的页面标题<head><title>首页</title></head>
            filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_02.html' //根据vue_02.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

e、运行打包.在package.json右键选择show npm Scripts

双击dev(其实执行的是npm run dev)

一切正常网页就会自动打开

修改代码测试热加载

 

阿花落知多少
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解node.js中的npm和webpack配置方法
10-18
Node.js用c++语言编写而成的，是一个基于chrome V8引擎的javascript运行环境。这篇文章主要介绍了详解node.js中的npm和webpack配置,需要的朋友可以参考下
终端中 npm安装报错 webpack
01-07
以webpack中安装autoprefixer为例： 终端输入: npm install autoprefixer 报出一堆错 gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit ...
前端vue、node、npm、webpack环境搭建从零开始
qq_56728342的博客
06-29 813
先下载nodejs，官网地址：下载 | Node.js 中文网 (nodejs.cn)http://nodejs.cn/download/确认nodejs安装是否成功cmd下输入node -v，查看是否能够正确打印出版本即可，然后再输入npm -v，查看是否能够正确打印出版本即可，这个npm就是一个软件包管理工具，就和linux下的apt软件安装差不多，一般安装nodejs时，npm会自动安装。然后为了解决下载速度的问题，需要安装node.js淘宝镜像加速器（cnpm），这样的话下载会快很多。在cdm中输入
（笔记整理）web开发工具(node npm Bower webpack)使用介绍-npm（3）
gansilian的专栏
03-25 170
参考路径： 一 .npm https://www.npmjs.com/ 第三方包搜索 https://www.cnblogs.com/john-sr/p/6036652.html https://www.npmjs.cn/getting-started/what-is-npm/ https://www.runoob.com/nodejs/nodejs-npm.html NPM 使用介绍...
Webpack 安装使用（详细步骤）
最新发布
2401_84094029的博客
05-07 749
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
npm源配置
wangl_a的博客
03-09 560
随便说说： 今天中午顿了一条红色的海鱼，味道不错。 需求：node环境，使用npm i安装软件包，经常被墙。 日期： 2019年3月9日 操作系统: centOS 7.6.1810 软件：npm 6.5.0 操作步骤： 1. 配置npm源为淘宝源，完成这步，多数npm包都可以使用npm i进行安装了。 2. 使用cnpm是个更便捷的方法：安装npm i cnpm 3. 使用cnpm i 代替 np...
为npm配置taobao源
weixin_33873846的博客
11-12 70
taobao提供的国内镜像npm源很好，速度相当快。在npm install时使用此源，依赖包加载速度相当快，而且不会被墙掉。 源地址：https://registry.npm.taobao.org 设置方法如下（win10）： 打开cmd console； 输入npm config set registry https://registry.npm....
nodejs、npm、webpack、nvm概念解释以及安装
一只倔强的蜗牛的博客
08-20 1783
概念 nodejs是js后端运行平台，可以把它看成java体系中对应的jdk，是三个里面最基础的。 npm是nodejs的包管理工具，可以把它看成maven中包依赖管理那部分。 webpack是前端工程化打包工具，可以把它看成maven中工程自动化构建那部分。 安装步骤   nodejs 去这里下载对应版本安装就可以了。 npm 安装好nodejs就自带了npm，但是默认是国外镜像...
vue和webpack安装命令详解
08-27
3. **局部安装Webpack**：对于实际项目，通常会在项目内部安装Webpack和其依赖： ``` cd my-project npm install webpack webpack-cli --save-dev ``` 如果需要使用Webpack Dev Server，还需安装： ``` npm ...
【npm】npm 全局安装 和 局部(本地)安装
01-07
本地安装：npm命令默认情况下会将包安装到当前目录下，避免了不同程序依赖不同版本包的冲突；...一般在 Node安装目录下的node_modules文件夹中：\Users\用户名\AppData\Roaming\ 目录下\npm\node_modules 项目的node_
nodejs-前端工程化环境-安装-webpack打包工具
插件开发
05-05 438
webpack分成四个部分，期中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化 Grunt 工具可以减轻你的劳动，简化你的工作。从官网下载长期支持版本，本文采用的是node-v18.16.0-x64.msi版本，在win10上测试。输入cd first，再输入npm run serve，即可成功运行vue项目。设置镜像源为国内某网。
npm镜像源配置
蜗牛
12-13 1464
npm镜像源配置
设置npm源
qq_37061571的博客
12-27 385
安装： npm install -g nrm 查看源候选项： nrm ls 使用数据源 nrm use taobao 添加源 nrm add npmGroup http://47.98.251.127:9998/nexus/repository/npm-group/ 查看使用的源： nrm current
NPM源设置
weixin_44746748的博客
09-17 161
NPM源设置 1、查看当前源 npm config get registry 2、npm初始 npm config set registry https://registry.npmjs.org 3、npm-淘宝源 npm config set registry https://registry.npm.taobao.org [yarn][https://classic.yarnpkg.com/en/docs/install#windows-stable] 4、查看当前源 yarn config get r
WebPack系列教程（四）：安装
zzzkk2009的专栏
03-09 4937
node.jsinstall node.js node.js包含一个包管理器：npmwebpackUse webpack in a projectVersionsDev ToolsContinue reading
npm 配置、换源、换储存库配置
热门推荐
smalCat的博客
03-10 5万+
一、要用npm的功能，一定需要有node.js的开发环境。 1、下载node.js,附上地址（https://nodejs.org/en/download/）；点击打开链接 下载node.js根据自己的系统下载，有32位和64位之分； 2、安装node.js 个人喜欢装在D盘，我装的是固态硬盘，分成了C、D两个盘，系统盘和储存...
npm一键配置-源更换、代理配置，解决npm安装慢问题
sinat_38319625的博客
04-16 371
如何快速对npm进行配置，替换npm中慢速的源，提高npm的安装效率
【NPM使用相关】NPM 源设置
效率
08-06 8311
NPM 源设置 在国内有时候受限于网络因素的影响，通常在安装一个包管理器之前可以切换为 淘宝 NPM 镜像，加速安装速度，但是要注意如果是私有模块在 NPM 官方的，则必须切换为官方源，否则会出现 404 错误。 查看当前 npm 源 npm config get registry # http://registry.npmjs.org/ 切换为 taobao 源 npm config set registry=https://registry.npmmirror.com 切换为 npm 官方源 在 np
npm报错、源过期、npm源地址的设置、npm常用镜像源地址
Astupidzirui的博客
04-01 405
npm常用镜像源地址，npm无法安装依赖解决。
npm安装及全局配置node
08-19
要安装和进行全局配置Node.js，可以按照以下步骤进行操作： 1. 首先，你需要先下载和安装Node.js。你可以从Node.js官方网站（https://nodejs.org/）下载适合你操作系统的安装包，并按照安装向导进行安装。 2. 安装完成后，打开命令行界面（如Windows的CMD或者Mac的终端）。 3. 输入以下命令来验证Node.js的安装是否成功： ``` node -v ``` 这会显示安装的Node.js的版本号，如果显示正常，则表示安装成功。 4. 接下来，我们可以使用npm（Node.js的默认包管理器）来安装全局依赖包。在命令行中输入以下命令来安装你需要的全局依赖包： ``` npm install -g 包名 ``` 例如，要安装webpack和webpack-cli，可以使用以下命令： ``` npm install -g webpack webpack-cli ``` 5. 若要进行npm的全局配置，可以输入以下命令来设置全局包的下载路径和缓存路径： ``` npm config set prefix "你的全局包安装路径" npm config set cache "你的缓存路径" ``` 例如，设置全局包的下载路径为"D:\nodejs\node_global"，缓存路径为"D:\nodejs\node_cache"，可以使用以下命令： ``` npm config set prefix "D:\nodejs\node_global" npm config set cache "D:\nodejs\node_cache" ``` 6. 现在，你已经完成了Node.js的安装和全局配置。你可以使用npm来安装其他依赖包，并使用全局安装的包进行开发和构建操作。 请注意，以上步骤是基于Windows系统的命令行操作，如果你使用的是其他操作系统，请相应地调整命令和路径。此外，具体的安装路径和配置路径可以根据个人需求进行修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [nodejs+npm的安装与配置](https://blog.csdn.net/qq_44625774/article/details/124090443)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [node.js和npm的安装与配置（借鉴数篇文章避坑）](https://blog.csdn.net/qq_48273925/article/details/127945063)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值