当前位置:   article > 正文

初始化创建一个webpack项目

初始化创建一个webpack项目

新建一个空的工程

-> % mkdir webpack-project

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

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

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

  1. -> % nvm current
  2. none

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

  1. -> % nvm list
  2. v16.13.0
  3. v19.2.0
  4. default -> 12.14.0 (-> N/A)
  5. iojs -> N/A (default)
  6. unstable -> N/A (default)
  7. node -> stable (-> v19.2.0) (default)
  8. stable -> 19.2 (-> v19.2.0) (default)
  9. lts/* -> lts/iron (-> N/A)
  10. lts/argon -> v4.9.1 (-> N/A)
  11. lts/boron -> v6.17.1 (-> N/A)
  12. lts/carbon -> v8.17.0 (-> N/A)
  13. lts/dubnium -> v10.24.1 (-> N/A)
  14. lts/erbium -> v12.22.12 (-> N/A)
  15. lts/fermium -> v14.21.3 (-> N/A)
  16. lts/gallium -> v16.20.2 (-> N/A)
  17. lts/hydrogen -> v18.20.2 (-> N/A)
  18. lts/iron -> v20.12.2 (-> N/A)

执行nvm use 19.2.0

  1. -> % nvm use 19.2.0
  2. Now using node v19.2.0 (npm v8.19.3)

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

  1. -> % npm init -y
  2. Wrote to /Users/lixiang/frontworkspace/webpack-project/package.json:
  3. {
  4. "name": "webpack-project",
  5. "version": "1.0.0",
  6. "description": "",
  7. "main": "index.js",
  8. "scripts": {
  9. "test": "echo \"Error: no test specified\" && exit 1"
  10. },
  11. "keywords": [],
  12. "author": "",
  13. "license": "ISC"
  14. }

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

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

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

  1. -> % npm install webpack webpack-cli --save-dev
  2. added 119 packages, and audited 120 packages in 13s
  3. 16 packages are looking for funding
  4. run `npm fund` for details
  5. found 0 vulnerabilities

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

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

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

  1. -> % ./node_modules/.bin/webpack -v
  2. System:
  3. OS: macOS 14.4.1
  4. CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  5. Memory: 182.02 MB / 16.00 GB
  6. Binaries:
  7. Node: 19.2.0 - ~/.nvm/versions/node/v19.2.0/bin/node
  8. Yarn: 1.22.22 - /usr/local/bin/yarn
  9. npm: 8.19.3 - ~/.nvm/versions/node/v19.2.0/bin/npm
  10. Browsers:
  11. Chrome: 124.0.6367.119
  12. Safari: 17.4.1
  13. Packages:
  14. webpack: ^5.91.0 => 5.91.0
  15. webpack-cli: ^5.1.4 => 5.1.4

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/559140
推荐阅读
相关标签
  

闽ICP备14008679号