webpack踩坑系列之基础篇

必备基础

工欲善其事，必先利其器，在学习 webpack以前，须要先了解一些关于 nodejs以及 npm的基础知识。

安装nodejs

1. 打开nodejs官网（https://nodejs.org/en/）下载.msi装文件，根据提示点击下一步便可完成安装；
2. 安装完成后，打开命令行，执行node -v，若出现版本号，说明安装成功。

利用npm初始化项目

npm是随同 nodejs一块儿安装的包管理工具。

新建文件夹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"  // 当执行`npm run dev`时会执行`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"
  }
}

总结

以上即是npm常见的基础知识，从下一节开始踩坑webpack的相关内容