准备工作
1、下载nodejs
2、了解 webpack和webpack cli
webpack cli主要是用于命令行执行webpack命令时,让系统知道是什么意思,如下图
现代的一些脚手架,并不需要安装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
npm install webpack webpack-cli –g
这里可以同时一个命令安装webpack和webpack-cli ,安装会直接 安装 或 升级 到最新版本
2、查看版本
webpack --version
webpack-cli --version
3、创建一个小项目
如下,一个小项目,只有一个html文件和几个js文件
4、全局编译打包
直接在命令行,cd进这个小项目的目录,然后运行webpack
dist 文件夹是默认情况下存放打包后所有东西的。main.js是打包后js代码的主入口
5、引入打包后文件
html 文件引入打包后的main.js 入口js文件,就能正常执行打包后的代码
======================
方式2:局部安装(用的多)
优缺点
优点:灵活,局部安装会跟随项目,项目用4,别人不管电脑上安装的是4还是5,拿到项目安装好依赖也是用的4,确保一定能正常执行。用的较多
缺点:需要更多配置
1、创建一个小项目
2、初始化项目
打开命令行cmd,cd进目录,然后输入
npm init
npm 会询问你一些问题,帮助你生成项目最基本的一些配置,配置会储存在项目下package.json 文件内,里面是一个对象{ },对象里面的属性都是配置。
下面是以vite为例的一个 package.json 示例
{
"name": "vue3admin", // 你项目的名字,你随意定义
"version": "0.0.0", // 你项目的版本,你随意定义
// scripts是可以运行的脚本
// 冒号:左边键是我们在命令行输入npm run 后面的命令,如npm run dev;
// 冒号:右边值是实际npm会执行的内容,如输入npm run dev后执行的就是vite命令;这个命令不同打包工具是不一样的,下面以vite这个工具为例
"scripts": {
"dev": "vite", // 一般dev都是运行一个测试环境服务器,把项目暂时跑起来
"build": "vite build", // 一般build是把整个项目进行打包,打包到一个输出文件夹里面,这个文件夹可以复制到服务器上运行,就是生产环境
"serve": "vite preview"
},
// dependencies是生产时依赖的模块,这些模块后面打包时会跟着打包,跟随生产环境到服务器上线
// 通过“ npm i 模块名 ”安装,默认都是生产依赖
// 冒号左边的是模块名
// 冒号右边的是版本,加^表示自动安装时,给我安装这个版本以上的版本
"dependencies": {
"animate.css": "^4.1.1",
"ant-design-vue": "2.1.2",
"axios": "^0.21.0",
"js-cookie": "^2.2.1",
"mockjs": "^1.1.0",
"qrcode": "^1.4.4",
"vue": "^3.0.11",
"vue-router": "^4.0.2",
"vuex": "^4.0.0"
},
// devDependencies 是开发时依赖的模块,这些模块只需要在开发的时候使用,打包成生产环境到服务器上线的时候不需要用到
// 通过“ npm i 模块名 -S -D ” 安装,默认都是生产依赖
// 冒号左边的是模块名
// 冒号右边的是版本,加^表示自动安装时,给我安装这个版本以上的版本
"devDependencies": {
"@vitejs/plugin-vue": "^1.1.4",
"@vue/compiler-sfc": "^3.0.5",
"vite": "^2.2.3",
"vite-plugin-mock": "^2.5.0"
}
}
3、局部安装webpack
npm install webpack webpack-cli –D
安装后开发依赖里面就会有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 里面,要运行这里的。
因此要运行
./node_modules/.bin/webpack
或者
npx webpack
npx 是优先在node_modules 的.bin下找对应的命令。
但通常情况下,我们会写在package.json 里的scripts里面,如下图,然后运行npm run build 即可,相当于npx webpack
6、引入打包后文件
html 文件引入打包后的main.js 入口js文件,就能正常执行打包后的代码