webpack

安装

pnpm add webpack webpack-cli webpack-dev-server -D

配置脚本

{
  "dev": "webpack-dev-server",
  "build": "webpack"
}

props

• mode: 表示所处的环境（开发还是生产）
• entry: 表示工程的入口文件
• output: 配置打包后的文件

{
  const config = {
    output: {
      filename: "build.js", // 输出的文件名
      path: path.resolve(__dirname, "dist"), // 输出的文件夹
      clean: true, // 每次打包清空上一次打包结果
    },
  };
}

tips1
webpack5 自带 tree shaking 树摇技术
声明但没有使用的变量会被摇掉
永远走不进去的 if 会被摇掉
tips2
webpack 只支持 js 和 json 文件
tips3
处理文件使用 loader
增加功能使用 plugin

• module: 用来配置 loader

如何处理 ts 文件

const config = {
  module: {
    rules: [
      {
        test: /\.ts$/, // 匹配ts结尾的文件
        use: "ts-loader", // 使用ts-loader处理ts文件
        exclude: /node_modules/, // 排除掉node_modules
      },
    ],
  },
};

tips
如果 ts 声明一个常量如下：
那么他的结果是将直接使用值，去除变量的声明

const a: number = 2;
console.log(a);

tips
可以采用swc-loader代替 ts-loader,这样可以优化打包的速度

如何处理图片

1. url-loader
   采用url-loader的方式对各种图片进行打包，这种方式将图片转为base64的格式嵌入到打包的代码中，这会使打包后的代码十分臃肿。
2. file-loader
   采用file-loader的方式在打包后会单独生成一个新的文件(对原先的图片进行压缩)

以上两种方式的区别
url-loader 可以通过配置的方式选择是否打包成base64格式,如下:
而 file-loader 没有限制，都打包成文件的形式
并且 url-loader 可以指定图片存放的位置

const config = {
  module: {
    rules: [
      {
        test: /\.{png|jpg|jpeg|svg|gif}$/i,
        use: {
          loader: "url-loader",
          options: {
            limit: 10 * 1024, // 表示10kb一下的图片才会打包成base64格式
            name: "static/[name]-[hash].[ext]",
          },
        },
      },
    ],
  },
};

如何处理 vue 文件

• 首先需要编写主文件

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.mount("#app");

如上代码所示：我们编写的 vue 代码最终编译打包后需要挂载到#app 节点，但是打包后并没有 html 文件，因此我们需要增加一个功能，因此安装html-webpack-plugin来加强 webpack 处理 html 的能力

pnpm add html-webpack-plugin -D

plugin 的使用

const htmlWebpackPlugin = require("html-webpack-plugin");
const config = {
  plugins: [
    htmlWebpackPlugin({
      template: "./index.html",
    }),
  ],
};

• 安装 loader

由于 webpack 不认识 vue 文件，因此我们需要安装对应的vue-loader让 webpack 能够处理 vue 文件,除此以外还需使用vue-loader提供的VueLoaderPlugin插件来使 webpack 支持 vue3

vue 文件中的 ts 处理

• 将 swc-loader 换为 ts-loader

const config = {
  module: {
    rules: [
      {
        test: /\.ts$/, // 匹配ts结尾的文件
        use: {
          loader: "ts-loader",
          options: {
            appendTsSuffixTo: [/\.vue$/],
          },
        },
        exclude: /node_modules/, // 排除掉node_modules
      },
    ],
  },
};

• 仍然使用 swc-loader

const config = {
  module: {
    rules: [
      {
        test: /\.ts$/, // 匹配ts结尾的文件
        use: {
          loader: "swc-loader",
          options: {
            jsc: {
              parser: {
                syntax: 'typescript'
              }
            }
          },
        },
        exclude: /node_modules/, // 排除掉node_modules
      },
    ],
  },
};

css 的处理

跟 ts 一样，webpack 不认识 css，因此需要安装对应的 loader

1. css-loader
2. style-loader
3. 如果需要 css 预处理器（less/sass）,也要安装对应的 loader

webpack 的加载方式是从右往左

const config = {
     module: {
        rules: [
             {
                test: /\.css$/, // 匹配ts结尾的文件
                use: [MiniCssExtractPlugin.loader, 'css-loader'] // 从右往左
            },
            {
                test: /\.scss$/, // 匹配ts结尾的文件
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'] // 从右往左
            }
        ]
     }
}

如上代码所示，我们使用了MiniCssExtractPlugin.loader代替了style-loader,因为style-loader处理后的css采用的是嵌入方式,这样会使html文件过于臃肿，因此采取MiniCssExtractPlugin.loader的方式，这个插件会使css单独形成一个文件并以link方式引入

代码分包

webpack默认会将所有的js代码打包成一个js文件，当我们引入了很多依赖时，就会导致页面的首屏加载很慢，因此需要分包

const config = {
   optimization: {
      splitChunks: {
         chunks: 'all',
         cacheGroups: {
            moment: {
               name: 'moment',
               test: /[\\/]node_modules[\\/]moment[\\/]/,
               priority: 1,
               chunks: 'all' // 静态模块、动态模块、共享模块全部拆分
            },
            // 当一个模块多次使用时，可以配置
            // common: {

            // }
         }
      }
   }
};

访问一个网址的时候

1. 浏览器的DNS缓存
2. 查找etc目录下的DNS缓存
3. 查找本地HOST文件对应的id
4. 发送DNS请求
   4.1 根域名查找 .
   4.2 顶级域名查找 com. cn.
   4.3 权威域名查找 baidu.com
   4.4 如果配了CDN,在CDN服务器查找 DNS服务器就近分配