11.【前端】webpack模块打包

重要知识点

1、将一个 JavaScript 文件直接通过 script 标签插入页面中与封装成 CommonJS 模块最大的不同在于，前者的顶层作用域是全局作用域，在进行变量及函数声明时会污染全局环境，而后者会形成一个属于模块自身的作用域，所有的变量及函数只有自己能访问。

2、CommonJS 与 ES6 Module 最本质的区别在于前者对模块依赖的解决是“动态的”，而后者是“静态的”。在这里“动态”的含义是，模块依赖关系的建立发生在代码运行阶段；而“静态”则是模块依赖关系的建立发生在代码编译阶段。在导入一个模块时，对于 CommonJS 来说获取的是一份导出值的拷贝；而在 ES6 Module 中则是值的动态映射，并且这个映射是只读的。

3、webpack.config.js 配置中，path 与 publicPath 的区别在于 path 指定的是资源的输出位置，而 publicPath指定的是间接资源的请求位置。

常用 loader

loader 的字面意思是装载器，在 Webpack 中它的实际功能则更像是预处理器。Webpack 本身只认识 JavaScript，对于其他类型的资源必须预先定义一个或多个 loader 对其进行转译，输出为 Webpack 能够接收的形式再继续进行，因此 loader 实际上是一个预处理的工作。

npm install css-loader style-loader --save

css-loader 的作用是处理 CSS 的各种加载语法（@import 和 url() 函数等），如果要使样式起作用还需要 style-loader 来把样式插入页面。

npm install babel-loader @babel/core @babel/preset-env --save

babel-loader 用来处理 ES6+ 并将其编译为 ES5 ，它是我们能够在工程中使用最新的语言特性（甚至还在提案中），同时不必特别关注这些特性在不同平台的兼容问题。

npm install ts-loader typescript core-js --save

ts-loader 与 babel-loader 的性质类似，它是用于连接 Webpack 与 Typescript 的模块。

npm install html-loader --save

html-loader 用于将 HTML 文件转化为字符串并进行格式化，这使得我们可以把一个 HTML 片段通过 JS 加载进来。

npm install file-loader --save

[webpack 5 已弃用] file-loader 用于打包文件类型的资源，并返回其 publicPath。

npm install url-loader --save

[webpack 5 已弃用] url-loader 与 file-loader 作用类似，唯一的不同在于用户可以设置一个文件大小的阈值，当大于阈值时与 file-loader 一样返回 publicPath，而小于该阈值时则返回文件 base64 形式编码。

备注

在配置 loader 时，实际上定义的是模块规则（module.rules），它主要关注两件事：该规则对哪些模块生效（test、exclude、include 配置），使用哪些 loader（use 配置）。loader 可以使链式的，并且每一个都允许拥有自己的配置项。

url-loader 和 file-loader 在 webpack 5 里的新方案

直接上代码

            // {
            //     test: /\.(png|jpg|gif)$/,
            //     use: [
            //         {
            //             loader: 'file-loader',
            //             options: {
            //                 name: '[sha512:hash:base64:7].[ext]'
            //             }
            //         }
            //     ]
            // } // by 七镜 2021-12-06
            {
                test: /\.(png|jpg|gif)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'static/[hash][ext][query]'
                }
            },
            {
                test: /\.svg/,
                type: 'asset/inline'
            }

可以看到，把之前的 *-loader 注释掉，添加新的 webpack 5 的 asset 配置就可以了，这里解释如下：
1.asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。
2.asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。