常见基础问题（webpack、vite篇一）

2022-07-02 353 阅读3分钟

1. 常见 loader 和 plugin 有哪些？二者的区别是什么？

常见 loader(webpack 文档里写了)

babel-loader 把 JS/TS 变成 JS

ts-loader 把 TS 变成 JS，并提示类型错误

markdown-loader 把 markdown 变成 html

html-loader 把 html 变成 JS 字符串

sass-loader 把 SASS/SCSS 变成 CSS

css-loader 把 CSS 变成 JS 字符串

style-loader 把 JS 字符串变成 style 标签

postcss-loader 把 CSS 变成更优化的 CSS

vue-loader 把单文件组件（SFC）变成 JS 模块

thread-loader 用于多进程打包

常见 plugin

html-webpack-plugin 用于创建 HTML 页面并自动引入 JS 和 CSS

clean-webpack-plugin 用于清理之前打包的残余文件

mini-css-extract-plugin 用于将 JS 中的 CSS 抽离成单独的 CSS 文件

SplitChunksPlugin 用于代码分包（Code Split）

DllPlugin + DllReferencePlugin 用于避免大依赖被频繁重新打包，大幅降低打包时间

eslint-webpack-plugin 用于检查代码中的错误

DefinePlugin 用于在 webpack config 里添加全局变量

copy-webpack-plugin 用于拷贝静态文件到 dist

二者的区别

loader 是文件加载器（这句废话很重要）
- 功能：能够对文件进行编译、优化、混淆（压缩）等，比如 babel-loader / vue-loader
- 运行时机：在创建最终产物之前运行

plugin 是 webpack 插件（这句废话也很重要）
- 功能：能实现更多功能，比如定义全局变量、Code Split、加速编译等
- 运行时机：在整个打包过程（以及前后）都能运行

webpack 如何解决开发时的跨域问题？

在开发时，我们的页面在 localhost:8080，JS 直接访问后端接口（如 https://xxxx.com 或 http://localhost:3000）会报跨域错误。

为了解决这个问题，可以在 webpack.config.js 中添加如下配置：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://xxxx.com',
        changeOrigin: true,
      },
    },
  },
};

此时，在 JS 中请求 /api/users 就会自动被代理到 http://xxxx.com/api/users 。

如果希望请求中的 Origin 从 8080 修改为 xxxx.com，可以添加 changeOrigin: true 。

如果要访问的是 HTTPS API，那么就需要配置 HTTPS 证书，否则会报错。

不过，如果在 target 下面添加 secure: false ，就可以不配置证书且忽略 HTTPS 报错。

如何实现 tree-shaking？

是什么

tree-shaking 就是让没有用到的 JS 代码不打包，以减小包的体积。

怎么做

怎么删
1. 使用 ES Modules 语法（即 ES6 的 import 和 export 关键字）
1. CommonJS 语法无法 tree-shaking（即 require 和 exports 语法）
1. 引入的时候只引用需要的模块
  1. 要写 import {cloneDeep} from 'lodash-es' 因为方便 tree-shaking
  1. 不要写 import _ from 'lodash' 因为会导致无法 tree-shaking 无用模块

怎么不删：在 package.json 中配置 sideEffects，防止某些文件被删掉
1. 比如我 import 了 x.js，而 x.js 只是添加了 window.x 属性，那么 x.js 就要放到 sideEffects 里
1. 比如所有被 import 的 CSS 都要放在 sideEffects 里

怎么开启：在 webpack config 中将 mode 设置为 production（开发环境没必要 tree-shaking）
1. mode: production 给 webpack 加了非常多优化。

参考文档：中文 | 英文