准备工作

1、下载nodejs

image.png

2、了解 webpack和webpack cli

image.png
webpack cli主要是用于命令行执行webpack命令时,让系统知道是什么意思,如下图
image.png
现代的一些脚手架,并不需要安装webpack-cli,但如果你想自己搭建基于webpack的项目,就需要安装。

======================

方式1:全局安装(用的少)

优缺点

优点:webpack会安装在C:\Users\你的用户名\AppData\Roaming\npm\node_modules\webpack 下,可以直接通过npm运行,适合从零开始搭建项目

缺点:兼容性差,假如你按照的是webpack5,而你的项目以前是webpack4打包的,就没办法直接使用。

1、通过npm安装

npm的一些命令可以查看 https://www.yuque.com/yejielin/mypn47/gdd1o9#IZp2q

  1. npm install webpack webpack-cli g

这里可以同时一个命令安装webpack和webpack-cli ,安装会直接 安装 或 升级 到最新版本

2、查看版本

  1. webpack --version
  2. webpack-cli --version

image.png

3、创建一个小项目

如下,一个小项目,只有一个html文件和几个js文件
image.png

4、全局编译打包

直接在命令行,cd进这个小项目的目录,然后运行webpack
image.png
dist 文件夹是默认情况下存放打包后所有东西的。main.js是打包后js代码的主入口
image.png

5、引入打包后文件

html 文件引入打包后的main.js 入口js文件,就能正常执行打包后的代码
image.png

======================

方式2:局部安装(用的多)

优缺点

优点:灵活,局部安装会跟随项目,项目用4,别人不管电脑上安装的是4还是5,拿到项目安装好依赖也是用的4,确保一定能正常执行。用的较多
缺点:需要更多配置

1、创建一个小项目

image.png

2、初始化项目

打开命令行cmd,cd进目录,然后输入

  1. npm init

npm 会询问你一些问题,帮助你生成项目最基本的一些配置,配置会储存在项目下package.json 文件内,里面是一个对象{ },对象里面的属性都是配置。
image.png

下面是以vite为例的一个 package.json 示例

  1. {
  2. "name": "vue3admin", // 你项目的名字,你随意定义
  3. "version": "0.0.0", // 你项目的版本,你随意定义
  4. // scripts是可以运行的脚本
  5. // 冒号:左边键是我们在命令行输入npm run 后面的命令,如npm run dev
  6. // 冒号:右边值是实际npm会执行的内容,如输入npm run dev后执行的就是vite命令;这个命令不同打包工具是不一样的,下面以vite这个工具为例
  7. "scripts": {
  8. "dev": "vite", // 一般dev都是运行一个测试环境服务器,把项目暂时跑起来
  9. "build": "vite build", // 一般build是把整个项目进行打包,打包到一个输出文件夹里面,这个文件夹可以复制到服务器上运行,就是生产环境
  10. "serve": "vite preview"
  11. },
  12. // dependencies是生产时依赖的模块,这些模块后面打包时会跟着打包,跟随生产环境到服务器上线
  13. // 通过“ npm i 模块名 ”安装,默认都是生产依赖
  14. // 冒号左边的是模块名
  15. // 冒号右边的是版本,加^表示自动安装时,给我安装这个版本以上的版本
  16. "dependencies": {
  17. "animate.css": "^4.1.1",
  18. "ant-design-vue": "2.1.2",
  19. "axios": "^0.21.0",
  20. "js-cookie": "^2.2.1",
  21. "mockjs": "^1.1.0",
  22. "qrcode": "^1.4.4",
  23. "vue": "^3.0.11",
  24. "vue-router": "^4.0.2",
  25. "vuex": "^4.0.0"
  26. },
  27. // devDependencies 是开发时依赖的模块,这些模块只需要在开发的时候使用,打包成生产环境到服务器上线的时候不需要用到
  28. // 通过“ npm i 模块名 -S -D 安装,默认都是生产依赖
  29. // 冒号左边的是模块名
  30. // 冒号右边的是版本,加^表示自动安装时,给我安装这个版本以上的版本
  31. "devDependencies": {
  32. "@vitejs/plugin-vue": "^1.1.4",
  33. "@vue/compiler-sfc": "^3.0.5",
  34. "vite": "^2.2.3",
  35. "vite-plugin-mock": "^2.5.0"
  36. }
  37. }

3、局部安装webpack

  1. npm install webpack webpack-cli D

image.png
安装后开发依赖里面就会有webpack和webpackcli,而且还会多出来几个文件

node_modules :node的模块,也就是我们安装的第三方模块,都会放在这个文件夹,如vue、webpack、UI组件等以及他们的依赖等等

package-lock.json :
(1)这里保存的就是实际的依赖和他们实际的版本号,而且lock表示这个文件是锁定所有版本的,只要这个文件在,不管你怎么npm i 安装模块,都是读取这里的版本,安装特定的版本号。
(2)好处就是稳定,如果没有这文件,外面package.json假设有一个模块是vue : ^2.7,意思是可以安装2.7以及以上的版本,这样可能会给你安装3.X版本。但如果2.x和3.x不兼容,那么项目运行就会出问题,跑不起来。而加了lock的,里面就会只安装2.7版本。

4、查看版本

package-lock.json 和 package.json 里面会显示版本,当然package-lock.json里面显示的是实际的版本

5、局部编译打包

在命令行里面输入webpack,是运行全局的webpack。如果没有安装全局的,就会报错说找不到这个命令。

局部的命令实际保存在了项目里面的 node_modules/.bin/webpack.js 里面,要运行这里的。
image.png

因此要运行

  1. ./node_modules/.bin/webpack
  2. 或者
  3. npx webpack

npx 是优先在node_modules 的.bin下找对应的命令。

但通常情况下,我们会写在package.json 里的scripts里面,如下图,然后运行npm run build 即可,相当于npx webpack
image.png

6、引入打包后文件

html 文件引入打包后的main.js 入口js文件,就能正常执行打包后的代码
image.png