webpack踩坑系列之基础篇

jiezi

5 年前

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

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

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。

打开控制台，在根目录下执行 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"
     }
   }

webpack踩坑系列之基础篇

必备基础

安装 nodejs

利用 npm 初始化项目

安装 webpack