重要知識點
1、將一個 JavaScript 文件直接通過 script 標簽插入頁面中與封裝成 CommonJS 模塊最大的不同在于，前者的頂層作用域是全局作用域沮趣，在進行變量及函數(shù)聲明時會污染全局環(huán)境路翻，而后者會形成一個屬于模塊自身的作用域，所有的變量及函數(shù)只有自己能訪問夯到。
2、CommonJS 與 ES6 Module 最本質(zhì)的區(qū)別在于前者對模塊依賴的解決是“動態(tài)的”饮亏，而后者是“靜態(tài)的”耍贾。在這里“動態(tài)”的含義是，模塊依賴關(guān)系的建立發(fā)生在代碼運行階段路幸；而“靜態(tài)”則是模塊依賴關(guān)系的建立發(fā)生在代碼編譯階段荐开。在導(dǎo)入一個模塊時，對于 CommonJS 來說獲取的是一份導(dǎo)出值的拷貝简肴；而在 ES6 Module 中則是值的動態(tài)映射晃听，并且這個映射是只讀的。
3着帽、webpack.config.js 配置中杂伟，path 與 publicPath 的區(qū)別在于 path 指定的是資源的輸出位置，而 publicPath指定的是間接資源的請求位置仍翰。
常用 loader
loader 的字面意思是裝載器赫粥，在 Webpack 中它的實際功能則更像是預(yù)處理器。Webpack 本身只認識 JavaScript予借，對于其他類型的資源必須預(yù)先定義一個或多個 loader 對其進行轉(zhuǎn)譯越平，輸出為 Webpack 能夠接收的形式再繼續(xù)進行，因此 loader 實際上是一個預(yù)處理的工作灵迫。
npm install css-loader style-loader --save
css-loader 的作用是處理 CSS 的各種加載語法（@import 和 url() 函數(shù)等）秦叛，如果要使樣式起作用還需要 style-loader 來把樣式插入頁面。
npm install babel-loader @babel/core @babel/preset-env --save
babel-loader 用來處理 ES6+ 并將其編譯為 ES5 瀑粥，它是我們能夠在工程中使用最新的語言特性（甚至還在提案中）挣跋，同時不必特別關(guān)注這些特性在不同平臺的兼容問題。
npm install ts-loader typescript core-js --save
ts-loader 與 babel-loader 的性質(zhì)類似狞换，它是用于連接 Webpack 與 Typescript 的模塊避咆。
npm install html-loader --save
html-loader 用于將 HTML 文件轉(zhuǎn)化為字符串并進行格式化舟肉，這使得我們可以把一個 HTML 片段通過 JS 加載進來。
npm install file-loader --save
[webpack 5 已棄用] file-loader 用于打包文件類型的資源查库，并返回其 publicPath路媚。
npm install url-loader --save
[webpack 5 已棄用] url-loader 與 file-loader 作用類似，唯一的不同在于用戶可以設(shè)置一個文件大小的閾值樊销，當大于閾值時與 file-loader 一樣返回 publicPath整慎，而小于該閾值時則返回文件 base64 形式編碼。
備注
在配置 loader 時围苫，實際上定義的是模塊規(guī)則（module.rules）裤园，它主要關(guān)注兩件事：該規(guī)則對哪些模塊生效（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 發(fā)送一個單獨的文件并導(dǎo)出 URL闰歪。之前通過使用 file-loader 實現(xiàn)嚎研。
2.asset/inline 導(dǎo)出一個資源的 data URI。之前通過使用 url-loader 實現(xiàn)库倘。
