什么是webpack

1.什么是webpack？

webpack是一套基于NodeJS的"模块打包工具",
在webpack刚推出的时候就是一个单纯的JS模块打包工具,可以将多个模块的JS文件合并打包到一个文件中
但是随着时间的推移、众多开发者的追捧和众多开发者的贡献
现在webpack不仅仅能够打包JS模块, 还可以打包CSS/LESS/SCSS/图片等其它文件

2.为什么要分模块？

如果将所有的JS代码都写到一个文件中, 十分不利于代码的维护和复用
所以我们可以将不同的功能写到不同的模块中, 这样就提升了代码的维护性和复用性
但是当将代码写到不同模块时新的问题又出现了,
例如: 导入资源变多了, 请求次数变多了, 网页性能也就差了
例如: 不同功能都放到了不同模块中了, 那么如何维护模块之间的关系也变成一个难题了

3.如何解决上述问题？

3.1项目上线时将用到的所有模块都合并到一个文件中
3.2在index.html中只导入主文件, 在主文件中导入依赖模块

4.如何通过webpack来打包JS模块

4.1安装webpack
npm init -y （初始化package.json）
推荐本地安装：
npm install --save-dev webpack
npm install --save-dev webpack-cli
不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
4.2在终端中输入打包的指令
npx webpack index.js（利用webpack将它和它依赖的文件打包到一个文件中）
（将所有的js模块都导入index.js文件中，最后将index.js打包即可，打包的过程：找到对应的模块，按顺序拷贝到index.js中，最后将index.js打包）
注意点:
index.js就是需要打包的文件
打包之后的文件会放到dist目录中, 名称叫做main.js