（JS模块化，CSS模块化，其他资源的模块化）
（重复使用现有的UI结构，样式，行为）
（目录结构的划分，编码的标准化，标准化界面，标准化文档，GIT分支管理）
（自动化构造，自动部署，自动化测试）
然后执行NPM运行DEV到WebPack.config.js。
然后自动在index.js文件下自动找到https://wwww.shouxicto.com/article/src，以根据内部的文件进行各种处理
安装webpack -dev -server以使我们在更改保存后自动打包我们
在配置的Dev-server配置后，包装内容将放置在根目录的内存中。
自动包装后，配置的DevServer的要求可以自动打开网页，并根据您的需求打开相应的主机端口
安装插头
配置插头
注意：
安装插头
配置CSS-LOADER，样式加载程序
加载程序的顺序是从右到左，从下到顶，第一个CSS处理CSS文件，然后以样式呈现样式
除了安装较小的负载器外，安装插件
配置较小的负载器
安装插头
配置加载程序
注意：
配置加载程序的另一种方法
WebPack只能打包以处理一些高级语法。对于无法处理的高级语法，有必要使用Babel-Loader进行包装处理
安装与Babel-Loader相关的包装
配置Babel-Loader
首先访问webpack.config.js并配置构建脚本，然后运行NPM Run Build
但是直接运行将被包装在远端文件下
如果要解决此类问题，则可以在webpack.config.js中配置文件的输出节点
然后，我们还配置了通往IMG文件的路径
包装的结果如下：
[外部链图失败了，源站可能是安全链机构。建议保存图片并直接上传（IMG-I5D9SUFM-1642952443423）（/appdata/roaming/typora-user-images/image-20222222014858.png）。]
为了每次包装时自动清理DIST目录中的文件（避免保留要保留的旧文件），您可以安装Clean-webpack-Plugin插件
插头的配置
这样，即使区域中还有其他无关文件，它也会在每个包装之前清除，不会影响已发布的文件的量
通常，将有更多优化的方案示例，例如：
开发环境中默认生成的源图记录了生成的代码的位置。报告错误的行与运行时时间的源代码之间的不一致问题与源代码不同。如图所示：
在开发环境中，建议在webpack.config.js中添加以下配置，以确保报告运行时报告错误的行数和源代码可以保持一致
在生产环境中，如果您只想找到特定数量的错误，并且不想泄漏源代码，
目前，可以将DevTool值的值配置为图：图中所示的Nosources-source-sumap特定效果：
1.在开发模式下：
2.在生产环境中：
原始：https：//juejin.cn/post/7099085545006956551