01. webpack 初识

一、概念

webpack—-模块化打包工具 ——— 生成 html—> css —> js 的静态资源文件

1.1 三大框架用webpack

1. 进行懒加载，b. 代码的分割，c. Tree Shaking

1.2 传统引入js和打包之后引入js区别

1.2.1 传统script脚本引入

传统方式通过<script src="/index.js"> 引入多个js模块的话，请求资源时会请求多个js文件，效率较低…
多发送http请求...

1.2.2 通过import引入的好处：

commonJS模块规范也可以进行打包
这样引入的好处在于可以：清晰知道 变量的 路径来源于哪里，便于维护

但是浏览器不支持这种代码：
可以通过webpack来编译这种代码…….

二、webpack+cli—-命令行介绍

1.2.1 webpack

wabpack: v4.41.2: webpack包
webpack-cli: v3.3.10: webpack脚手架，可以通过命令行启动webpack打包编译文件
npx webpack index.js 编译 index.js 这个文件
npx webpack --config ./webpack.dev.config.js 更改默认配置文件名

1.2.2 webpack定义和配置

webpack：只知道模块相关的事情、模块化打包工具