准备工作

1、下载nodejs

  • webpack的官方文档是https://webpack.,js.org/
  • Webpack的运行是依赖Node环境的，所以电脑上必须有Node环境
    • 所以我们需要先安装Node.js，并且同时会安装npm ;

  • Node官方网站: https://nodejs.org/

    2、了解 webpack和webpack cli

  • 那么它们是什么关系呢?

    • 执行webpack命令，会执行node_modules下的.bin目录下的webpack
    • webpack在执行时是依赖webpack-cli的，如果没有安装就会报错
    • 而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程
    • 所以在安装webpack时，我们需要同时安装webpack-cli (第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西)

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

方式1：全局安装（用的少）

优缺点

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

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

1、通过npm安装

  1. npm install webpack webpack-cli –g

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

2、查看版本

  1. webpack --version
  3. webpack-cli --version

3、创建一个小项目

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

4、全局编译打包

直接在命令行，cd进这个小项目的目录，然后运行webpack

  • 我们可以通过webpack进行打包，之后运行打包之后的代码
    • 在目录下直接执行webpack 命令
  • 生成一个dist文件夹，里面存放一个main.js的文件，就是我们打包之后的文件
    • 这个文件中的代码被压缩和丑化了
    • 另外我们发现代码中依然存在ES6的语法，比如箭头函数、const等，这是因为默认情况下webpack并不清楚我们打包后的文件是否需要转成ES5之前的语法，后续我们需要通过babel来进行转换和设置

dist 文件夹是默认情况下存放打包后所有东西的。main.js是打包后js代码的主入口
WebPack-安装 - 图3

5、引入打包后文件

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

方式2：局部安装（用的多）

优缺点

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

1、创建一个小项目

image.png

2、初始化项目

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

  1. npm init

npm 会询问你一些问题，帮助你生成项目最基本的一些配置，配置会储存在项目下package.json 文件内，里面是一个对象{ }，对象里面的属性都是配置。
WebPack-安装 - 图6
下面是以vite为例的一个 package.json 示例

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

3、局部安装webpack

  1. npm install webpack webpack-cli –D

WebPack-安装 - 图7
安装后开发依赖里面就会有webpack和webpackcli，而且还会多出来几个文件

  • node_modules
    • node的模块，也就是我们安装的第三方模块，都会放在这个文件夹，如vue、webpack、UI组件等以及他们的依赖等等
  • package-lock.json
    • 这里保存的就是实际的依赖和他们实际的版本号，而且lock表示这个文件是锁定所有版本的，只要这个文件在，不管你怎么npm i 安装模块，都是读取这里的版本，安装特定的版本号。
    • 好处就是稳定，如果没有这个文件，外面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 里面，要运行这里的。
WebPack-安装 - 图8
因此要运行

  1. ./node_modules/.bin/webpack
  2. 或者
  3. npx webpack
  4. // npx 是优先在node_modules 的.bin下找对应的命令。

但通常情况下，我们会写在package.json 里的scripts里面，如下图，然后运行npm run build 即可，相当于npx webpack
WebPack-安装 - 图9

6、引入打包后文件

html 文件引入打包后的main.js 入口js文件，就能正常执行打包后的代码
WebPack-安装 - 图10