必备基础

工欲善其事,必先利其器,学习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 -Dnpm 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"     }   }