1.webpack基本概念
目标: webpack本身是, node的一个第三方模块包, 用于打包代码。
2.打包如何理解？
- webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就很好理解了。
- 就是将webpack中的各种资源模块进行打包合并成一个多个包（Bundle）并且在打包的过程中，还可对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。
3.webpack使用
初始化包环境
yarn init
安装依赖包
yarn add webpack webpack-cli -D
配置scripts(自定义命令)
scripts: { "build": "webpack" }
运行打包命令
yarn build #或者 npm run build
重新打包
yarn build
4.webpack-入口和出口
- dist文件夹：用于存放之后打包的文件
- src文件夹：用于存放我们写的源文件
- main.js：项目的入口文件。
- mathUtils.js:定义了一些数学工具函数，可以在其他地方引用，并且使用。
- index.html: 浏览器打开展示的首页html（在这里引用的是src内最终打包的文件即dist文件夹的内容）。
- package.json：通过npm init生成的，npm包管理的文件。
- 以下为mathUtils.js文件和main.js文件中的代码：（CommonJS模块化规范，CommonJS是模块化的标准，nodejs就是CommodJS（模块化）的实现）
webpack配置 - webpack.config.js(默认)
新建src并列处, webpack.config.js 填入配置项 `const path = require("path")
module.exports = { entry: "./src/main.js", // 入口 output: { path: path.join(__dirname, "dist"), // 出口路径 filename: "bundle.js" // 出口文件名 } } `
