一只小松鼠_的博客

通过使用export和import语句，ES Modules 允许在浏览器端导入和导出模块。当使用 ES Modules 进行开发时，开发者实际上是在构建一个依赖关系图，不同依赖项之间通过导入语句进行关联。主流浏览器（除IE外）均支持ES Modules，并且可以通过在 script 标签中设置来加载模块。默认情况下，模块会延迟加载，执行时机在文档解析之后，触发DOMContentLoaded事件前。预构建依赖通常指的是在项目启动或构建之前，对项目中所需的依赖项进行预先的处理或构建。

所有要被打包的资源都要跟入口产生直接/间接的引用关系。

from配置的是不被压缩的文件夹的位置（相对于配置文件来说的位置），本例中webpack配置文件与静态资源文件夹均在项目根目录下。to属性配置的是打包后静态资源文件夹里的文件被放到打包文件夹下的隶属文件夹名。static目录下的文件不可通过require或者import的方式引入文件，否则该文件就会参与打包。这时候我们可以通过webpack的插件copy-webpack-plugin，保留某一文件夹下的的所有文件。2. 在项目下新建一个文件夹用于存储不想被编译的文件，如‘static’。

Tree-shaking意为摇树，作用是剔除没有使用的代码，以降低包的体积，它是基于ES Module 规范来实现的，所以**Tree Shaking 只支持 ESM 的引入方式，不支持其他的引入方式。所以，ESM 下模块之间的依赖关系是高度确定的，鉴于此，webpack可以在运行过程中静态分析模块之间的导入导出，确定 ESM 模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。鼠标hover上去可以看到每个依赖的体积大小，从上往下，表示依赖的嵌套关系。