小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
前言
兜兜转转,摸来摸去,突然翻出了之前webpack搭建vue的笔记,就重新弄一下了,待完结之后,还会带大家用webpack5搭建vue3 + vite搭建vue3,尽情期待!
准备工作
- 安装最新的 Node.js 环境;(官网地址:nodejs.org/zh-cn/)
- 安装 cnpm 淘宝npm镜像;(在控制台执行命令:npm install -g cnpm --registry=registry.npm.taobao.org)(我感觉可以不要)
- windows系统下,windows+R调出命令,输入cmd,打开命令工具,检测npm是否安装:输入命令:npm -v
- 输入命令:webpack -v,查看当前webpack的版本号(ps: 若无,npm安装webpack:输入命令:npm install webpack -g)
- 进入项目目录,输入命令:npm init,生成package.json文件
- 输入命令:npm install webpack --save-dev为项目添加webpack依赖
- 重头戏来了 --- 新建 webpack.config.js;(用于配置 webpack 的运行方式)
现在我们 webpackDemo 文件夹内的结构应该是这样的:
ps:webpack 4.0 则需要去额外安装 webpack-cli 哟
npm install webpack --save-dev npm install webpack-cli --save-dev
ps:知识补充,主要是我太菜了当时,这些都不怎么懂。。。
mkdir webpackDemo // 创建项目
cd webpackDemo // 进入项目
mkdir app // 在项目中创建app文件
mkdir common // 在项目中创建common文件
cd app // 进入app文件夹
cd .. //返回到webpackDemo项目根目录
cd common // 进入common文件
touch index.html // 创建index.html文件
- mkdir:创建文件夹
- cd ..:返回所在目录的上级目录
- touch:创建文件
- app:用来存放原始数据和我们将写的JavaScript模块
- common:用来存放之后供浏览器读取的文件(包括使用webpack打包生成的js文件以及一个index.html文件)