webpack使用教程

一、为什么需要打包工具？

开发时，我们会使用架(React、 Vue) ，ES6 模块化语法，Less/Sass 等 css 预处理等语法进行开发这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、Css 等语法，才能运行所以我们需要打包工具帮我们做完这些事
除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等

二、基本使用

Webpack是一个静态资源打包工具。
它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去输出的文件就是编译好的文件，就可以在浏览器段运行了我们将 webpack 输出的文件叫做 bundle。

简单目录介绍（js文件、html文件（静态资源））

三、功能介绍

webpack本身功能是有限的：

开发模式：仅能编译JS的ES Model语法

生产模式：能便宜J谁的ES Model语法，还能压缩js代码

四、下载依赖

打开终端、来到项目根目录。运行以下指令：

初始化 package.json

npm init -y

此时会生成一个基础的package.json文件。

需要注意的是package.json中的name字段不能叫做webpack，否则下一步会报错

下载依赖

npm i webpack webpack-cli -D

启用webpack

开发模式

npx webpack ./src/main.js --mode=development

生产模式

npx webpack ./src/main.js --mode=production

npx webpack：是用来运行本地安装的webpack包的

./src/main.js:指定webpack从main.js文件开始打包，不但会打包main.js，还会将其依赖也一起打包进来。

--mode=xxx：指定模式（环境）。

观察输出文件

默认webpack会将文件打包输出到dist目录下，我们查看dist目录下文件情况就好了。

总结

webpack本身功能比较少，只能处理js资源，一旦遇到css等其他资源就会报错

所以我们学习webpack，就是主要学习如何处理其他资源。