一、项目配置方案
webpack有两种使用方案:
1、webpack指令方式
把配置写在一个config文件中，在命令行中使用webpack指令调用webpack进行打包,可以加上--参数来修改配置、指定配置文件
2、node API方式
在一个js文件中使用webpack提供的node API调用webpack进行打包，命令行输入node + 文件名，在node环境中执行这个js文件，webpack的api就会启动webpack打包
二、环境变量
在执行命令行指令之后，会先设置环境变量的值，再读取webpack的配置，再按照配置进行打包
设置环境变量的方案
cross-env :
先准备.env文件
再到命令行使用指令指定对应的环境文件
"build": "cross-env NODE_ENV=production
"start": " cross-env NODE_ENV=development
dot-env :
用法同cross-env，只是使用的命令行指令不一样
在js文件直接指定环境变量：
可以给不同的场景配置不同的js可执行文件
在js文件中分别设置环境变量
针对不同的场景使用不同的命令执行对应的js文件
三、开发调试
本节主要讨论在使用webpack搭建项目时在node环境的调试问题，以及如何使用webpack的source-map功能辅助开发调试
1、node环境调试
想要查看webpack配置在执行过程中的取值，可以使用断点调试
第一步先在可执行的js文件打断点
第二步开始调试脚本
第三步进入调试界面进行调试
2、source map调试
使用source map调试这里分三种情况
- 配合devserver使用
- 无devserver，在pc浏览器调试
- 无devserver，在移动端调试
第一种情况，devserver自动集成了source map的使用，无需讨论
第二种情况需要在pc浏览器上为打包生成的chunk手动关联sourcemap文件
第三种情况，则需要配合插件
本人开发的插件可以帮助定位源码
gitee地址:gitee.com/guoyiao/fin…
npm地址:www.npmjs.com/package/fin…
附上插件使用方式:
1、安装
npm i findsourcelocation -g
2、使用
首先你要得到报错信息，同时你还有得到项目的source-map文件
在命令行中输入 fsl -p <文件地址> -l <错误行号> -c <错误列数>
如果你正确输入，控制台就会打印出源码错误位置信息
3、指令
输入 fsl -h 查看可用指令
-v 版本号
-p sourcemap 文件路径
-l 错误行数
-c 错误列数
-h, --help display help for command
四、webpack配置
现有的网络教程大多都有介绍webpack的配置，这里就不多说了，只做简单介绍
webpack的配置既可以在config文件中设置
也可以在命令行指定
webpack --mode=development
命令行指定的配置优先级高于配置文件中的配置，如果重复设置同一个配置项，webpack会采用命令行中的配置，
关于webpack配置的更多内容，我整理出了一个思维导图：源文件地址
五、babel和pollyfill
webapck在打包的过程中会对代码进行简化、压缩、混淆，对文件进行合并，但是它并不能对es6+语法进行转换，要想让程序获得更好的兼容性，就需要引入babel，将es6+语法转换到兼容性更好的es5的语法，但是这种语法转换是有局限的，它只能转换新的句法，例如const、let，但是babel不会转换一些新的api,例如promise、include等，这时候就需要对这些api做额外的兼容处理，也就是打补丁(pollyfill)
1、在webpack中使用babel
在webpack中的module.rulse中设置js文件的loader为babel-loader即可
2、babel配置
babel有两种配置文件
- .babelIrc文件
- babel.config.js文件
.babelIrc文件是局部配置文件，babel.config.js文件是全局配置文件
babel的配置分为预设(presets)和插件(plugins),预设(presets)就是一组插件，插件是用来做代码转换的，
3、babel基本原理
webpack通过babel-loader调用babel, babel使用bebel-core生成ast抽象语法树，再调用预设和插件进行语法转换
4、在项目中pollyfill
可以引用第三方库，例如core.js(核心库)、regenerater-runtime(主要用来兼容async、await)，也可以手写pollyfill代码，(ps：面试的时候面试官让你手写一个promise，其实就是在pollyfill)
五、webpack原理和性能优化
由于作者本身是个菜鸡，在这块还没有研究过，所以就不写了，但是以后有时间研究后，会把这块补上
如果新手读者想要自己从零开始搭建一个项目，可以参考我的另一篇文章《使用webpack从零开始搭建一个react+ts项目》,文章还未完成，待完成后我会附上链接地址
