webpack搭建简单vue项目 第 1.0 章 -- 准备工作

188 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」             ,赢取创作大礼包,挑战创作激励金

前言

兜兜转转,摸来摸去,突然翻出了之前webpack搭建vue的笔记,就重新弄一下了,待完结之后,还会带大家用webpack5搭建vue3 + vite搭建vue3,尽情期待!

准备工作

  1. 安装最新的 Node.js 环境;(官网地址:nodejs.org/zh-cn/
  2. 安装 cnpm 淘宝npm镜像;(在控制台执行命令:npm install -g cnpm --registry=registry.npm.taobao.org)(我感觉可以不要)
  3. windows系统下,windows+R调出命令,输入cmd,打开命令工具,检测npm是否安装:输入命令:npm -v
  4. 输入命令:webpack -v,查看当前webpack的版本号(ps: 若无,npm安装webpack:输入命令:npm install webpack -g)
  5. 进入项目目录,输入命令:npm init,生成package.json文件
  6. 输入命令:npm install webpack --save-dev为项目添加webpack依赖
  7. 重头戏来了 --- 新建 webpack.config.js;(用于配置 webpack 的运行方式)

现在我们 webpackDemo 文件夹内的结构应该是这样的:

clipboard.png 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文件)