vscode中安装webpack_VSCode下手动构建webpack项目(示例代码)

1.执行npm install nrm -g，安装nrm，此模块主要用于切换npm镜像源，简化手动配置步骤

2.执行 nrm ls，可以看到npm源地址列表，当前使用的是默认源，npm https://registry.npmjs.org/

3.执行 nrm use taobao，将npm的源修改为taobao所指向的地址

4.再次执行nrm ls，可以看到npm的源已经指向了taobao源，今后执行npm命令就默认从taobao镜像拉取模块

5.执行命令npm config ls：查看npm配置，检查源是否切换成功

6.在VSCode中打开终端，切换到当前项目根目录下，输入npm init -y，初始化项目。初始化完成后会在项目根目录下生成package.json文件

7.执行npm install webpack -g，安装全局webpack模块，安装完成后才能在终端中输入webpack命令，否则会提示无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

8.执行命令 npm install webpack-cli -g，全局安装webpack-cli

9.执行命令下面命令，勇webpack将./src/main.js打包生成为./dist/bundle.js文件

【webpack ./src/main.js -o ./dist/bundle.js --mode development】

注意：-o是webpack 4.x之后新增的选项，低版本不需要加-o，4.x之后如果不加-o就会报错

--mode development：代表是以开发模式打包，如果不加句，默认以发布模式打包，但是会在终端提示黄色警告信息。

10.之后在Index.html中引用dist目录下的bundle.js，测试能正确运行。

vscode中安装webpack_VSCode下手动构建webpack项目(示例代码)相关推荐

android 代码卸载app,Android在一个app中安装并卸载另一个app的示例代码
Android在一个app中安装并卸载另一个app 1.在app→src→main下新建文件夹asserts,将准备安装的apk文件放在asserts内 2.在app→src→main→res下新建文 ...
linux aspnet服务器,在Linux中安装ASPNET.Core3.0运行时的示例代码
摘要: # 以下示例适用于x64位runtime v3.0.0mkdir /runtimescd /runtimeswget https://... # 以下示例适用于x64位runtime v3.0 ...
vscode中安装webpack_webpack项目配置流程
最近突然发现前端特别好玩,就当做给自己放个小假,试着记一点前端的笔记. 自学vue.js时遇到的webpack项目配置,感觉操作有点琐碎,而且由于笔者看的教程的年代比较久远,许多步骤和指令都已经有变化 ...
VSCode中安装Live Server插件实现Html网页代码的实时预览
VSCode中安装Live Server插件实现Html网页代码的实时预览利用寒假时间学习了一些基本的网页知识,在编写Html代码时可以利用IDEA.WebStorm.Dream Weaver等工具 ...
如何在Vscode中安装Python库
如何在vscode中安装python库 1.已经在vscode中装了python并配置好python运行环境. 检查是否正确配置好运行环境,按Windows+R组合键在运行窗口输入cmd,打开命令提示 ...
服务器购买网站vuter,vscode中安装开发html5中需要的插件
vscode中安装开发html5中需要的插件 vscode中安装开发html5中需要的插件最近在学习H5,也开始尝试着用vscode来写h5的代码.vscode是一个很不错的剪辑器,已经用它来写过p ...
Docker中安装Jenkins实时发布.net core 项目(一)
Docker中安装Jenkins实时发布.net core 项目安装docker 懒人篇手动安装 dockerfile安装jenkins 常规安装jenkins jenkins的安装搜索jenk ...
Docker中安装Jenkins实时发布.net core 项目(二)
Docker中安装Jenkins实时发布.net core 项目防坑点升级docker jenkins运行运行命令 jenkins拉取git并构建项目其他查看发布文件防坑点升级docke ...
java web 默认页面配置文件_Tomcat中配置全局的错误页面（如404）+删除Tomcat中webapps目录下的自带项目，防止Tomcat默认文件泄露...
进入tomcat目录中conf文件编辑web.xml,将下面代码复制到文件末尾,如下 400 /error.html 404 /404/404.html 500 /404/500.html 2.添加4 ...

vscode中安装webpack_VSCode下手动构建webpack项目(示例代码)

vscode中安装webpack_VSCode下手动构建webpack项目(示例代码)相关推荐

最新文章

热门文章