必备基础
工欲善其事,必先利其器,学习webpack之前,要先了解一些关于node以及npm的基础知识。
安装nodejs
安装nodejs只需要去nodejs官网(https://nodejs.org/en/)下载.msi安装文件,根据提示点击下一步即可完成安装。
安装完成后,打开命令行,执行node -v
,若出现版本号,说明安装成功。
利用npm初始化项目
npm为nodejs包管理器,安装nodejs是自动安装,因此无需额外安装
- 1.新建文件夹
test-npm
,进入test-npm
文件夹(以下简称根目录
),打开命令行执行npm init -y
即完成了项目的初始化,执行完成后在test-npm
文件夹下会生成package.json
文件; package.json
定义了
test-npm`这个项目所需要的各种模块,以及项目的配置信息,详细内容如下:{ "name": "test-npm", // 项目名称 "version": "1.0.0", // 版本号 "description": "", // 项目描述 "main": "index.js", // 入口文件,当执行require('test-npm')时会执行index.js的代码 "scripts": { // 当执行`npm run xxx`时会执行此处的命令,后面详细介绍 "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], // 关键字 "author": "", // 作者 "license": "ISC" // 项目许可证 }
在根目录下新建
index.js
,在index.js
中输入console.log(111)
。修改package.json
文件,在scripts
属性末尾添加"dev": "node index.js"
,修改后package.json
文件的内容如下:{ "name": "test-npm", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", + "dev": "node index.js" }, "keywords": [], "author": "", "license": "ISC" }
- 打开命令行,执行
npm run dev
,此时控制台会打印111
。
安装webpack
- 打开控制台,在根目录下执行
npm install webpack webpack-cli -D
,npm install xxx
后面可以跟--save
(简写-S
)或者--save-dev
(简写-D
),其中-S
代表在线上环境会用到的模块,-D
代表本地开发需要依赖的模块,不需要在线上运行。因为webpack
只需要在本地运行,所以执行-S
。同理,当我们需要的模块要在线上运行,那么需要执行-S
,例如:执行npm install express
这里的express
需要在线上运行,所以执行-S
; 等待安装完成,package.json文件内容如下:
{ "name": "test-npm", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "node index.js" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { // 本地开发需要依赖的模块,线上环境不需要 "webpack": "^4.35.3", "webpack-cli": "^3.3.5" }, "dependencies": { // 线上环境需要依赖的模块 "express": "^4.17.1" } }