【webpack】- 1 - 简介

Webpack 简介

1. Webpack 是什么

定义摘抄自官网：
https://webpack.js.org/concepts/
https://www.webpackjs.com/concepts/

• At its core, webpack is a static module bundler for modern JavaScript applications
• 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器

2. 为什么要打包

• 当我们写代码时，可能会使用不同的框架，不同语法，让代码更易读，也可以让我们更专注于业务代码，而这些代码是浏览器所不支持的，所以需要打包成浏览器能看懂的代码

3. 什么是打包

1. 从入口文件开始，记录相关引用依赖，形成依赖关系树状结构
2. 根据依赖关系树引入相关资源，形成 chunk (代码块)
3. 将不同的资源进行处理，比如将 less / scss 等转换成 css，将 JS 高级语法编译成浏览器支持的语法等
4. 最后输出 bundle

以上整个过程，将我们写的代码转换成浏览器能看懂的代码，就是打包

4. webpack 的核心概念

1. Entry： 入口文件
2. Output：输出文件名和路径
3. Loader：webpack 默认只能理解 JS/JSON 文件，需要使用 loader 将 css/img 等非 JS 文件进行转换
4. Plugins：帮助 webpack 执行其他操作，e.g. 打包优化，压缩，重新定义环境变量等
5. Mode： development | production，使用相应模式的配置
   • evelopment：只需要让代码能运行即可，进行本地调试
   • production：需要对代码进行优化压缩，使其能够上线运行