Webpack安装与配置

2024-05-14 06:49:08

1. 安装NVM

官网：https://github.com/nvm-sh/nvm

(1). 通过 curl 安装：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

(2). 通过 wget 安装：

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

正常情况下都可以安装成功，如果安装失败，请自行百度。一般的解决思路都是查询到上面网址的IP地址，在hosts文件中填上IP地址和域名的映射关系，这样就可以不走DNS域名解析这一过程了。

安装完成后，把NVM添加到环境变量里面。

source ~/.bash_profile

完成上面的操作以后，判断是否安装成功。

nvm list

如果提示命令未找到，执行 vi .bash_profile，在里面添加如下内容，保存退出。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

2. 安装Node和NPM

nvm install v18.12.1

安装完成后检查是否安装成功。

3. 创建空项目

创建项目：mkdir my-project

进入项目：cd my-project

初始项目：npm init -y

4. 安装Webpack和Webpack-cli

npm install webpack webpack-cli --save-dev

安装完成以后，可以通过以下命令检查是否安装成功。

./node_modules/.bin/webpack -v

5. 配置文件名称

Webpack默认的配置文件为webpack.config.js，当然也可以通过webpack --config命令来指定配置文件。

6. 配置文件解析

webpack配置组成主要由打包的入口文件、打包的输出、打包的环境、Loader配置、插件配置这几部分组成。

7. 快速构建

为了简化构建运行的命令，可以在package.json里加上如下命令。

这样就可以通过使用npm run build命令来快速完成构建了。

Webpack安装与配置相关推荐

webpack安装及配置
1.概念 webpack是一个静态化前端打包,可以把复杂的依赖关系打包为一个或多个文件,最终生成浏览器可以识别的资源html.css图片,js 2.安装 win+r输入cmd 唤出系统控制面板然后进 ...
webpack安装、配置
webpack官网概念: 本质上,webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具.当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图( ...
webpack安装和配置
首先需要安装node.js. http://blog.csdn.net/itpinpai/article/details/50396697 https://www.cnblogs.com/sloong ...
webpack的使用、安装和配置打包的入口和出口
webpack的基本使用在这里我使用VScode为编辑器讲解隔行变色案例第一步:创建项目空白文件,并在终端中运行npm init -y 命令.初始化包管理配置文件package.json 第二步 ...
webpack 的基本使用—— 创建列表隔行变色项目||在项目中安装和配置 webpack
创建列表隔行变色项目 ① 新建项目空白目录,并运行 npm init –y 命令,初始化包管理配置文件 package.json ② 新建 src 源代码目录 ③ 新建 src -> index ...
git 创建webpack项目_Webpack入门：从安装到配置
文档 webpack 用于编译 JavaScript 模块. 一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互. 这里以入门者的角度(中文)介绍 webpack 的常用 ...
Webpack 2 视频教程 002 - NodeJS 安装与配置
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
vs vue 查看webpack安装成功_在Vue+webpack中详细讲解基础配置
这篇文章主要介绍了Vue+webpack项目基础配置教程,需要的朋友可以参考下. 最近在学习webpack,跟着课程一个单页面应用,在这里记录一下. 这个部分主要讲了如何配置webpack的环境,以及 ...
java-初识大前端Node.js、ES6、Npm、Babel、模块化规范、WebPack、Vue-element-admin本地安装问题及解决、Git安装及配置、uni-app
VS code安装安装成功配置自动补齐Emment Node.js node.js下载网址: http://nodejs.cn/ 安装成功! 概念 Node.js发布于2009年5月,由Ryan ...

最新文章

热门文章