初始化创建一个webpack项目

新建一个空的工程

bash 复制代码
-> % mkdir webpack-project

为了方便追踪执行每一个命令,最终产生了哪些变更,将这个空工程初始化成git项目

bash 复制代码
-> % cd webpack-project/

-> % git init
Initialized empty Git repository in /Users/lixiang/frontworkspace/webpack-project/.git/

在当前目录下,执行nvm current,查看当前使用的node版本

bash 复制代码
-> % nvm current
none

显示没有,执行nvm list,,查看本地电脑上可以使用的node版本

bash 复制代码
-> % nvm list
       v16.13.0
        v19.2.0
default -> 12.14.0 (-> N/A)
iojs -> N/A (default)
unstable -> N/A (default)
node -> stable (-> v19.2.0) (default)
stable -> 19.2 (-> v19.2.0) (default)
lts/* -> lts/iron (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.17.0 (-> N/A)
lts/dubnium -> v10.24.1 (-> N/A)
lts/erbium -> v12.22.12 (-> N/A)
lts/fermium -> v14.21.3 (-> N/A)
lts/gallium -> v16.20.2 (-> N/A)
lts/hydrogen -> v18.20.2 (-> N/A)
lts/iron -> v20.12.2 (-> N/A)

执行nvm use 19.2.0

bash 复制代码
-> % nvm use 19.2.0
Now using node v19.2.0 (npm v8.19.3)

执行 npm init -y,初始化一个空的npm项目

bash 复制代码
-> % npm init -y
Wrote to /Users/lixiang/frontworkspace/webpack-project/package.json:

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

从git的变更看一下 npm init -y执行后,有哪些变更

git变更里,新增了一个package.json的文件,初始化了一个空的npm项目,将这个改动提交commit

执行npm install webpack webpack-cli --save-dev,安装webpack和webpack-cli

bash 复制代码
-> % npm install webpack webpack-cli --save-dev

added 119 packages, and audited 120 packages in 13s

16 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

git的变更里,package.json中可以看到新增了两个依赖项目,安装了webpack和webpack-cli

将package-lock.json和package.json这两份文件提交到git仓库,忽略node_modules文件

安装后的webpack,实际上是放到了node_module下,可以执行以下命令来验证webpack的版本

bash 复制代码
-> % ./node_modules/.bin/webpack -v

  System:
    OS: macOS 14.4.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 182.02 MB / 16.00 GB
  Binaries:
    Node: 19.2.0 - ~/.nvm/versions/node/v19.2.0/bin/node
    Yarn: 1.22.22 - /usr/local/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v19.2.0/bin/npm
  Browsers:
    Chrome: 124.0.6367.119
    Safari: 17.4.1
  Packages:
    webpack: ^5.91.0 => 5.91.0
    webpack-cli: ^5.1.4 => 5.1.4

这样,一个空的webpack工程就新建好了

相关推荐
永乐春秋10 分钟前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿12 分钟前
【前端】CSS
前端·css
ggdpzhk13 分钟前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜5 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点5 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow5 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o5 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic6 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā6 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue