1. webpack，模块打包机简介、安装、基础配置

webpack 简介

官网地址：

webpack中文网

webpack官网

什么是 webpack

webpack 是基于整个项目进行构建的，前端的一个项目自动化构建工具，它是基于 Node.js 开发出来的一个前端工具。可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

打包的好处：

• 将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
• 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。【ts=>js、scss=>css、...】
• 将代码打包的同时进行混淆，提高代码的安全性。
• 自动刷新：监听本地源代码的变化。自动重新构建刷新浏览器
• 压缩js，css，html代码，压缩合并图片等
• 提取多个页面的公关代码，提取首屏不需要的执行部分的代码让其异步加载
• ...

npm 安装过的文件都会出现在 package.json 文件：

{
  "name": "webpack-study", // 项目名称，**必须有**，少于214字，不可以以.和_开头，应是URL安全的字符。
  "version": "1.0.0", // 项目版本，**必须有**，应满足[major, minor, patch]【重大，次要，补丁】的格式。
  "description": "",  // 项目的描述信息
  "main": "index.js", // 指定了程序的主入口文件
  "scripts": { // 通过`npm run [key值]`，可执行对应的行为。
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open --port 3000 --contentBase dist --hot",
    "start": "webpack-dev-server"
  },
  "keywords": [], // 项目的一些关键字。有助于用户通过关键字搜索到你的项目
  "author": "", // 项目拥有者的相关信息
  "license": "ISC", // 指明你的项目许可证，让用户知道以何种权限使用你的项目
  "bugs": "", // 当用户发现了你的bugs时，可以在这里找到你并反馈给你
  "files": "", // 表明项目下的哪些文件是重要的。效果类似于.gitignore文件，区别是前者包含性，后者排除性。
  "repository": "", // 指明你的项目仓库地点。这有助于其他人能够帮助你一起维护项目，最常见的就是GitHub仓库啦：
  "dependencies": { // 运行时依赖(生产和开发都会用到的依赖)，使用npm --save（-S）命令安装会出现在这里，会随项目打包。
    "npm": "^6.9.0",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3"
  },
  "devDependencies": { // 开发时依赖，一般是开发的工具，使用npm --dev（-D）命令安装会出现在这里，不随项目一起打包。
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "less": "^3.12.2",
    "less-loader": "^7.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.6.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}