一、学习内容
1、什么是webpack
webpack is a static module bundler for modern JavaScript applications. webpack是一个==静态的模块化打包工具==，为现代的JavaScript应用程序； 我们来对上面的解释进行拆解：打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展； 2、vue项目加载的文件 2.1、JavaScript的打包：将ES6+转换成ES5的语法；TypeScript的处理，将其转换成JavaScript； 2.2、css的处理：CSS文件模块的加载、提取；Less、Sass等预处理器的处理； 2.3、资源文件img、font：图片img文件的加载；字体font文件的加载； 2.4、html资源的处理：打包HTML资源文件；处理vue项目的SFC文件.vue文件； 3、环境：Webpack的运行是==依赖Node环境==的，所以我们电脑上必须有Node环境 所以我们需要先安装Node.js，并且同时会安装npm；我当前电脑上的node版本是v16.14.0，npm版本是8.3.1（你也可以使用nvm或者n来管理Node版本）； 4、安装 webpack的安装目前分为两个：webpack、webpack-cli那么它们是什么关系呢？执行webpack命令，会执行node_modules下的.bin目录下的webpack；webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西） 5、问什么要分模块 如果将所有的JS代码都写到一个文件中, 十分不利于代码的维护和复用所以我们可以将不同的功能写到不同的模块中, 这样就提升了代码的维护性和复用性但是当将代码写到不同模块时新的问题又出现了,例如: 导入资源变多了, 请求次数变多了, 网页性能也就差了例如: 不同功能都放到了不同模块中了, 那么如何维护模块之间的关系也变成一个难题了 1 项目上线时将用到的所有模块都合并到一个文件中2 在index.html中只导入主文件, 再主文件中再导入依赖模块 6、npm其他命令 ◼ 卸载某个依赖包： npm uninstall package npm uninstall package --save-dev npm uninstall package -D ◼ 强制重新build npm rebuild ◼ 清除缓存 npm cache clean ◼ npm的命令其实是非常多的： 更多的命令，可以根据需要查阅官方文档 7、webpack配置文件 7.1、默认配置 打包入口文件：src/index.js 打包出口文件：dist/main.js 打包模式：生产模式 7.2、常见配置 entry: 需要打包的文件 output: 打包之后输出路径和文件名称 mode: 打包模式 可以告知webpack使用相应模式的内置优化： 默认值是production（什么都不设置的情况下）； 可选值有：'none' | 'development' | 'production'；
| 
