webpack是什么？
本质：用来构建大型工程化项目的工具。（用于把开发的代码转化为运行代码）
学习webpack的意义：我们平常不会直接使用webpack，但是 前端框架（比如说vue）搭建工程的时候有一个脚手架工具，脚手架工具里用到了webpack；所以，学习webpack能让我们：
知道这个工程到底是怎么搭出来的；
知道怎么改动配置；
知道在大型的工程化项目里前端要解决什么问题；
webpack用来解决什么问题？
浏览器端的模块化带来的问题
效率问题：更多的模块带来了更多的js文件，更多的js文件带来了更多的网络请求，降低了页面的访问效率；
兼容问题：浏览器目前仅支持ES6的模块化标准，并且还存在兼容性问题；
工具问题：浏览器不支持npm下载的第三方包
这些仅仅是前端工程化的一个缩影
当开发一个具有规模的程序，你将遇到非常多的非业务问题，这些问题包括：执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等，我们将这些问题称之为工程问题。工程问题与业务无关，但它深刻的影响到开发进度，如果没有一个好的工具解决这些问题，将使得开发进度变得极其缓慢，同时也让开发者陷入技术的泥潭。
造成问题的根本原因
思考：上面提到的问题，为什么在node端没有那么明显，反而到了浏览器端变得如此严重呢？
答：在node端，运行的JS文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高的多
根本原因
：在浏览器端，开发时态（devtime）和运行时态（runtime）的侧重点不一样
开发时态，devtime：
模块划分越细越好
支持多种模块化标准
支持npm或其他包管理器下载的模块
能够解决其他工程化的问题
运行时态，runtime：
文件越少越好
文件体积越小越好
代码内容越乱越好
所有浏览器都要兼容
能够解决其他运行时的问题，主要是执行效率问题
这种差异在小项目中表现的并不明显，可是一旦项目形成规模，就越来越明显，如果不解决这些问题，前端项目形成规模只能是空谈。
这样的工具，叫做
构建工具
这样一来，开发者就可以专注于开发时态的代码结构，而不用担心运行时态遇到的问题了。
既然开发时态和运行时态面临的局面有巨大的差异，因此，我们需要有一个工具，这个工具能够让开发者专心的在开发时态写代码，然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。
这样的工具，叫做
构建工具
webpack的安装和使用
webpack简介
webpack是打包模块的工具，它把
一切
视为模块。比如说下图里的js、sass、png等等
左边是我们开发时写的代码，右边是通过中间的webpack构建之后的运行代码。
webpack如何打包模块？开发时有一个入口模块（通常是一个js文件），它是通过这个入口模块为起点，分析各个模块之间的依赖关系（它可以通过require、import来读取其他依赖的模块），然后经过中间一系列的过程（压缩、合并），最终生成运行时的文件。
webpack特点
为前端工程化而生
。它的出现就是为了解决前端工程化的问题，特别是浏览器端工程化中遇到的问题，目的就是让开发者集中精力编写业务代码，不用考虑兼容性、执行效率等问题，这些问题全让webpack处理；
简单易用
。安装好之后，一行额外的代码都不用写，支持零配置；
强大的生态
。虽然一行代码都不用写，但又非常灵活、强大；它可以高度扩展，它本身的功能并不多，但它提供了一些机制，可以扩展某些功能，可以通过第三方库来扩展webpack的功能，第三方库可以融入webpack中；
基于nodejs
。为什么基于nodejs？它的工作原理是把入口文件的内容读出来，读出来之后通过require语句、import语句分析依赖关系，根据依赖关系再次读出文件内容，因此整个过程需要不停的
读文件
。那如果它的文件是在浏览器里面运行的是读不了文件的，只有在node环境里才能读文件，所以，webpack打包的过程需要node环境，而不是我们开发时的代码需要在node环境里运行，比如说开发时要写doucment或者window等在浏览器端运行的代码都可以，只不过中间构建的过程是在node环境
基于模块化
。webpack在构建过程中要分析依赖关系，分析方式是根据模块化的导入语句（比如说require、import）来进行分析。它支持模块化的各种标准，包括CommonJS、ES6 Module，因为我们开发时写的代码不是被node读取，而是被webpack读取
webpack的安装
webpack通过npm安装，它提供了两个包：
webpack：核心包，包含了webpack构建过程中要用到的所有api（比如说：一些对象和函数）；
webpack-cli：提供了一个简单的cli命令，它能调用webpack核心包里的api，来完成构建过程 ；
安装方式：
全局安装：可以全局使用webpack命令，但是每个项目都对应了同一个webpack版本
本地安装
：推荐,每个项目都用自己的webpack版本进行构建
npm i -D webpack webpack-cli
安装好之后文件夹里多了这些文件
直接命令npx webpack，它会以./src/index.js作为入口文件分析依赖关系,成功生成一个dist目录，里面一个main.js（main.js是通过打包来的）
如何运行main.js
点击右键，run code
新建一个html页面，引入main.js
如果引入jquery库，那么jquery是否会被打包到mian.js里？
会。因为它参与最终运行，是运行时代码。
运行npm i jquery,引入jquery库
运行npx webpack，进行打包
发现main.js里有jquery代码
如何设置main.js在开发环境运行，还是生产环境运行？
通过npx webpack --mode=development来设置打包结果main.js在开发环境运行；
通过npx webpack --mode=production来设置打包结果main.js在开发环境运行；
我们可以设置打包结果（即main.js）是运行在开发环境还是生产环境；如果设置运行在开发环境，webpack会尽量让我们调试方便；如果设置运行在生产环境，webpack可以做一些优化，比如说压缩，减少体积；
在脚本里配置main.js的运行环境
直接npm run dev打包出来就是开发环境。
直接npm run build打包出来就是生产环境。
jinglisha
前端 @硬件 | 组件 | 小程序 | uniapp
粉丝
