webpack5学习与实战-（十二）-webpack模块与解析原理

一，在webpack中何为模块

当我们在代码中引入使用的这些东西，都可以成为webpack的模块。

二，模块的引入

webpack能够解析三种常见的模块引入方法。

1，相对路径

2，绝对路径

绝对路径就是从项目的根目录开始的。这个"/"就是指代的项目根目录：

3，第三方模块的引入

import _ from "lodash";
console.log("---", _.join(["webpack", "module"], "-"));

webpack会自动从node_module中识别并引入对应的第三方库。

三，路径别名

当我们在写业务代码的时候，经常需要引入组件，如果一个组件隐藏的太深，就很麻烦。为了简化路径的写法，于是就有了路径别名：

 resolve: {
    alias: {
      "@": path.resolve(__dirname, "../src") //配置路径别名，__dirname是node的一个全局变量，记录当前文件的绝对路径（是这个配置文件在的目录）
    }
  },

四，外部扩展

有时候，我们为了减小bundle的体积，会把一些不变的第三方库用cdn的形式引入进来。比如jQuery,我们会在html文件中通过script中引入使用。但是我们更希望webpack帮助我们做这件事情。于是可以在webpack中配置external:

  externalsType: "script",
  externals: {
    jquery: ["https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js", "$"]
  },

这样之后，在代码中引入jquery，会暴露为一个$的对象，可以直接使用。并且它的引入，是首屏资源引入之后，执行到这部分代码时才会引入，这样可以减少首屏的js加载时间。