模块解析

模块解析

（解析）加载本地模块

const add = (x, y) => {
  return x + y;
};
// 通过commonjs导出的对象，在引入时也需要通过commonjs引入
module.exports = {
  add,
};

const math = require("./math.js");
console.log(math.add(1, 2));

打包后运行打包后文件，得到结果

（解析）加载第三方模块

在项目更目录下安装一个loadsh：
npm i loadsh -D

// 导入第三方包
import _ from "loadsh";
// 导入自定义包
const math = require("./math.js");
console.log(math.add(1, 2));
console.log(_.join(["hello", "webpack"], " "));

结果

解析绝对路径下的包

// 导入第三方包
import _ from "loadsh";
// 导入自定义包
// 解析src下的math.js文件
const math = require("/src/math.js");
console.log(math.add(1, 2));
console.log(_.join(["hello", "webpack"], " "));

解析相对路径下的包

// 导入第三方包
import _ from "loadsh";
// 导入自定义包
// 解析相对路径下的math.js文件
const math = require("./math.js");
console.log(math.add(1, 2));
console.log(_.join(["hello", "webpack"], " "));

解析模块路径

// 导入第三方包
// 解析模块路径，直接写模块名就可以找到对应的模块
import _ from "loadsh";
// 导入自定义包
const math = require("./math.js");
console.log(math.add(1, 2));
console.log(_.join(["hello", "webpack"], " "));

别名

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/app.js",
  resolve: {
    alias: {
      //   @  就是代表了./src这一个路径，例如：
      // @/a  就是  ./src/a
      "@": path.resolve(__dirname, "./src"),
    },
  },
};

隐藏扩展名

在vue中，引入文件时可以省略文件的扩展名
当一个文件下有同名（math）的文件，但扩展名不同时。
那么在引入（math）文件时，会默认优先引入js文件内容
这个可以通过extensions配置,r如下：

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./src/app.js",
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
    // 配置后会有优先使用json文件
    extensions: [".json",".js",".vue"]
  },
};

外部扩展

将一些第三方库以cdn的方式引入

// 导入第三方包
import $ from "jquery";
console.log($);
// 这时时无法使用的，需要在webpack中配置相关信息才行

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: "./src/app.js",
  plugins: [new HtmlWebpackPlugin({ template: "./index.html" })],
  externals: {
    // 这里的key值，将会成为引用时使用的值
    jquery: "jQuery",
  },
};

需要在模板中引入jquery才能实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 导入jquery的cnd链接 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
  </head>
  <body></body>
</html>

运行结果：已经可以将jquery的相关信息打印（可以使用jquery了）

jquery的cdn链接在中查找，如下：

自动导入第三方库

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  entry: "./src/app.js",
  // 又因为是自动的，所以不需要配置模板，同时也不需要在模板中导入jquery的cdn链接
  plugins: [new HtmlWebpackPlugin()],
  // externalsType用于告诉浏览器，externals中配置的链接通过什么标签展示
  // 如下为，通过script标签展示
  externalsType:"script",
  externals: {
    jquery: [
        "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js",
      // "jQuery" 等同于"$"
      "$"
    ],
  },
};

配置好后，就可以直接打包运行，这时的jquery会自动导入到打包后的文件中，

依赖图

// 异步载入模块
import(/* webpackChunkName: 'lodash' */ "lodash")
  // 起别名
  .then(({ default: _ }) => {
    console.log(_.join(["hello", "world"], " "));
  });

// 导入第三方包
import math from "./math.js";
console.log(math.add(5, 6));
// 这时时无法使用的，需要在webpack中配置相关信息才行

const add = (x, y) => {
  return x + y;
};
// 通过commonjs导出的对象，在引入时也需要通过commonjs引入
module.exports = {
  add,
};

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "development",
  // 配置多入口
  entry: {
    app: "./src/app.js",
    app2: "./src/app2.js",
  },
  plugins: [new HtmlWebpackPlugin()],
  externalsType: "script",
};

这时的打包结果：

项目目录：

查看依赖关系

安装：npm i webpack-bundle-analyzer -D
导入插件

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
module.exports = {
  mode: "development",
  // 配置多入口
  entry: {
    app: "./src/app.js",
    app2: "./src/app2.js",
  },
  plugins: [new HtmlWebpackPlugin(), new BundleAnalyzerPlugin()],
  externalsType: "script",
};

打包运行后的效果图：

webpack12-模块与依赖