Webpack 开发/学习

AMD和Commonjs

CommonJS 是服务器端模块的规范， Node.js 采⽤了这个规范。 CommonJS 规范加载模
块是同步的，也就是说，只有加载完成，才能执⾏后⾯的操作。 AMD 规范则是⾮同步加载
模块，允许指定回调函数。

AMD 推荐的⻛格通过返回⼀个对象做为模块对象， CommonJS 的⻛格通过对
module.exports 或 exports 的属性赋值来达到暴露模块对象的⽬的。

webpack

WebPack 是⼀个模块打包⼯具，你可以使⽤ WebPack 管理你的模块依赖，并编绎输出模
块们所需的静态⽂件。它能够很好地管理、打包 Web 开发中所⽤到的 HTML 、
Javascript 、 CSS 以及各种静态⽂件（图⽚、字体等），让开发过程更加⾼效。对于
不同类型的资源， webpack 有对应的模块加载器。 webpack 模块打包器会分析模块间的
依赖关系，最后 ⽣成了优化且合并后的静态资源。

Webpack常见plugins loader和plugin的区别

参考文章：
https://www.cnblogs.com/frank-link/p/14836898.html
https://blog.csdn.net/qq_42647547/article/details/125128755

webpack的loader和plugin的区别：
1、功能不同
    Loader：Webpack 中的 Loader 主要用于处理文件类型的转换和处理，比如将 ES6/ES7 代码转换成 ES5 代码，
            将 LESS/SASS/CSS 文件转换成浏览器可识别的 CSS 文件等。
    Plugin：Webpack 中的 Plugin 主要用于在打包过程中做一些额外的处理工作，比如文件压缩、代码分离、资源优化、生成 HTML 文件等。
2、使用方式不同
    Loader：Webpack 中的Loader需要在模块的rules属性中配置，同时还需要通过npm安装相应的Loader，如babel-loader、css-loader等。
            在配置Loader时，需要设置 Loader 的匹配规则和转换规则，使得 Webpack 能够正确地识别和处理需要转换的文件类型。
    Plugin：Webpack中的Plugin需要在配置文件中单独引入，并通过 new 关键字实例化，如new HtmlWebpackPlugin()、new UglifyJsPlugin()等。
            在配置Plugin时，需要设置插件的参数和执行顺序，以便插件能够按照开发者的需求进行工作。
3、作用范围不同
    Loader：Webpack 中的 Loader 是针对于每个文件进行处理的，每个文件都会经过 Loader 进行转换处理，因此 Loader 的作用范围比较小。
    Plugin：Webpack 中的 Plugin 是针对于整个项目进行处理的，它们能够修改 Webpack 打包的结果、优化打包过程、生成文件等，
            因此 Plugin 的作用范围比较大。

打包工具

rollup, webpack, vite
rollup更适合打包库，webpack更适合打包项目，vite基于rollup实现了热更新也适合打包项目。
参考:   https://www.bilibili.com/video/BV1bq4y117Hz?spm_id_from=333.999.0.0

webpack相关知识

1. 什么是 Webpack？
    Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。
    它将多个模块打包成一个或多个 bundle，以优化加载时间和性能。
2. Webpack 的主要特点是什么？
    支持多种模块化规范，如 CommonJS、AMD、ES6 模块等。
    支持代码分割和懒加载，以优化加载时间和性能。
    支持多种文件类型的处理，如 JavaScript、CSS、图片等。
    支持插件机制，可以扩展其功能。
    支持开发和生产环境的配置，以满足不同的需求。
3. Webpack 的工作原理是什么？
    读取入口文件，分析其依赖关系。
    根据依赖关系，递归地读取和分析其他模块。
    将所有模块打包成一个或多个 bundle。
    在打包过程中，可以应用各种插件和优化策略。
4. Webpack 的 loader 和 plugin 有什么区别？
    Webpack 的 loader 和 plugin 都是用来扩展其功能的机制，但它们的作用不同。
    loader 用于处理各种文件类型，将其转换为模块，以便 Webpack 可以处理。
    plugin 用于在打包过程中执行各种任务，如代码压缩、文件拷贝、环境变量注入等。
5. 如何配置 Webpack？
    Webpack 的配置文件是一个 JavaScript 模块，可以通过导出一个对象来进行配置。
    配置文件中可以设置入口文件、输出文件、loader、plugin 等。
    可以根据不同的环境（如开发环境和生产环境）设置不同的配置。
6. 如何实现代码分割和懒加载？
    Webpack 可以通过动态导入（Dynamic Import）实现代码分割和懒加载。
    动态导入是 ES6 的一个语法特性，可以在运行时异步加载模块。
    Webpack 可以将动态导入的模块打包成一个单独的 chunk，以实现代码分割和懒加载。
7. 如何优化 Webpack 的构建速度？
    使用缓存：可以使用缓存来避免重复的构建过程。
    减少 loader 和 plugin 的使用：可以减少 loader 和 plugin 的使用，以减少构建时间。
    使用多进程构建：可以使用多进程构建工具，如 HappyPack 和 thread-loader，以加速构建过程。
    使用 DLL：可以将一些不经常变化的模块打包成 DLL，以避免重复构建。
8. 如何处理 CSS 文件？
    Webpack 可以使用 css-loader 和 style-loader 处理 CSS 文件。
    css-loader 用于处理 CSS 文件中的 import 和 url，以便 Webpack 可以处理它们。
    style-loader 用于将 CSS 插入到 HTML 中的 style 标签中。
9. 如何处理图片和字体文件？
    Webpack 可以使用 file-loader 和 url-loader 处理图片和字体文件。
    file-loader 用于将文件复制到输出目录，并返回文件名。
    url-loader 可以将文件转换为 base64 编码的 DataURL，并将其嵌入到 JavaScript 中。
10. 如何实现热更新？
    Webpack 可以使用 webpack-dev-server 和 Hot Module Replacement（HMR）实现热更新。
    webpack-dev-server 是一个开发服务器，可以在内存中编译和打包代码，并提供热更新功能。
    HMR 是一种技术，可以在运行时替换模块，以实现热更新。

webpack 常见配置

(1) 设置文件路径
然后可以设置绝对路径别名
chainWebpack: (config)=>{
   
    config.resolve.alias
    .set(‘@‘,  resolve(‘./src’))
    .set(‘_c’,  resolve(‘./src/components’))
}

(2) 设置eslint
lintOnSave:  true

(3) 配置解析css,less,sass等样式文件以及图片icon等资源文件.

(4) 打包时不生成.map文件
productionSourceMap:  false

(5) 通过写接口的基础路径解决前端跨域
// 代理跨域
server: {
   
  proxy: {
   
    [env.VITE_APP_BASE_API]: {
   
      target: env.VITE_SERVE, // 服务器地址
      changeOrigin: true, // 是否需要代理跨域
      rewrite: (path) => path.replace(/^\/api/, ''), // 路径重写
    },
  },
},

从 4 个角度对 webpack 和代码进行了优化

按模块引入需要的功能组件

比如： 引入core.js解决ES6+语法不兼容问题

// 完整引入
// import 'core-js'    // 文件体积会变大，得不偿失。所以需要按模块引入
// 按需加载
// import "core-js/es/promise";




// babel.config.js  进行配置，实现自动按需引入
module.exports = {
   
  // 智能预设：能够编译ES6语法
  presets: [
    [
      "@babel/preset-env",