建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
大家好，我是小菜。一個(gè)希望能夠成為 吹著牛X談架構(gòu) 的男人!如果你也想成為我想成為的人，不然點(diǎn)個(gè)關(guān)注做個(gè)伴，讓小菜不再孤單!
本文主要介紹 Webpack 使用
如有需要，可以參考
前端認(rèn)知
挺多人對(duì)前端開(kāi)發(fā)是存在一定的誤解的，感覺(jué)會(huì)點(diǎn) H5 + C3 + JS 就等于會(huì)前端開(kāi)發(fā)，但近幾年前后端分離的模式逐漸流行起來(lái)，就說(shuō)明前端早已沒(méi)有之前那么簡(jiǎn)單。
站在我這個(gè)后端的視角上倒覺(jué)得， 前端是個(gè)文官，后端是個(gè)武將，不能說(shuō)做到能文能武，但起碼求武的同時(shí)不能不識(shí)一丁，退一兩步來(lái)說(shuō)，當(dāng)前端實(shí)習(xí)妹子遇到 Bug 束手無(wú)措的時(shí)候，你這偽境前端若能出手相助~那在她人眼中你就是一位 '架著七彩祥云而來(lái)的蓋世英雄~'
如果說(shuō)你會(huì) Bootstrap 加上 Layui，那么就說(shuō)你會(huì)前端，難免會(huì)被人拍死在沙灘上~ 實(shí)際上的前端開(kāi)發(fā)是由以下幾個(gè)模塊組成：
- 模塊化(js 的模塊化，css 的模塊化，資源的模塊化)
- 組件化(復(fù)用現(xiàn)有的 UI 結(jié)構(gòu)，樣式，行為)
- 規(guī)范化(目錄結(jié)構(gòu)的劃分、編碼規(guī)范化、接口規(guī)范化、文檔規(guī)范化、Git分支管理)
- 自動(dòng)化(自動(dòng)化構(gòu)建、自動(dòng)部署、自動(dòng)化測(cè)試)
與后端如出一轍，該有的模塊都有。
說(shuō)到工程化，在后端開(kāi)發(fā)中存在主流的解決方案有 Maven 工程 和 Gradle 工程。前端工程化解決方案也有 webpack 和 vite。那么就進(jìn)入我們今天的正題，走進(jìn) Webpack
Webpack
一、概念認(rèn)知
本質(zhì)上，webpack 是一個(gè)用于現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包工具。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)在內(nèi)部從一個(gè)或多個(gè)入口點(diǎn)構(gòu)建一個(gè)依賴(lài)圖，然后將你的項(xiàng)目中所需的每一個(gè)模塊組合成一個(gè)或多個(gè) bundles，它們均為靜態(tài)資源，用來(lái)展示你的內(nèi)容。
以上內(nèi)容摘于官網(wǎng)，官里官氣的。下面我們簡(jiǎn)單概括一下
- 概念總結(jié)：webpack 是前端項(xiàng)目工程化的具體解決方案
- 功能總結(jié)：
提供了友好的前端模塊化開(kāi)發(fā)的支持
提供了代碼壓縮混淆、處理瀏覽器兼容Js、以及性能優(yōu)化等強(qiáng)大功能
- 優(yōu)點(diǎn)總結(jié)：提高了前端開(kāi)發(fā)效率和項(xiàng)目的可維護(hù)性
二、基本使用
實(shí)踐出真知!我們直接使用來(lái)加強(qiáng)認(rèn)識(shí)。
首先我們需要?jiǎng)?chuàng)建一個(gè)空白目錄，然后在空白目錄中執(zhí)行 npm init -y 來(lái)初始化包管理配置文件 package.json
可以簡(jiǎn)單理解為這個(gè) package.json 就相當(dāng)于 maven 工程中的 pom.xml 文件
在 Maven 工程中我們通常上都是把源代碼放在 src 目錄底下，該 webpack 工程類(lèi)似，因此我們下一步便是在該目錄下創(chuàng)建 src 目錄，繼而創(chuàng)建兩個(gè)文件 index.html (首頁(yè)) 和 index.js (腳本文件)
我們傳統(tǒng)上要引入 Jquery 文件，一般有兩種方式
- 一種是下載 jquery.mini.js 文件，然后在項(xiàng)目中引入
- 一種是引用網(wǎng)上現(xiàn)成的 CDN 庫(kù)，這樣可以不用下載
兩種方式各有優(yōu)劣，這里不做過(guò)多說(shuō)明!
既然我們?cè)擁?xiàng)目是使用 npm 初始化的，那我們便可以使用 npm 來(lái)幫我們下載好所需要的包
- npm install jquery -s
添加成功后我們可以在 package.json 文件中看到我們剛剛下載的包，這種方式有沒(méi)有讓你回想到 maven 的 maven install 命令，這種奇怪的熟悉感~
等 jquery 包安裝完成后，我們就可以在 node_modules 目錄下查看到剛剛安裝的包
然后在項(xiàng)目中進(jìn)行引用
瀏覽器查看 JS 運(yùn)行正常
以上方式也是傳統(tǒng)的引包方式，跟 webpack 仍是沒(méi)有半點(diǎn)關(guān)系。接下來(lái)我們就來(lái)看看 webpack 是如何使用的。
1、webpack 安裝
在終端中運(yùn)行如下命令，安裝與 webpack 相關(guān)的兩個(gè)包：
- npm install webpack@5.42.1 webpack-cli@4.7.2 -D
擴(kuò)展
- npm install xxx -S，也就是 npm install module_name --save 寫(xiě)入dependencies
- npm install xxx -D，也就是 npm install module_name --save-dev寫(xiě)入devDependencies
devDependencies ，是我們開(kāi)發(fā)的時(shí)候需要用到的一些包，只需要用于開(kāi)發(fā)階段，真正打包上線(xiàn)的時(shí)候并不需要這些包，dependencies，這個(gè)則是需要發(fā)布到生產(chǎn)環(huán)境中的。
2、webpack 配置
我們需要在項(xiàng)目的根目錄中，創(chuàng)建一個(gè)名為 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
- module.exports = {
- mode: "development"
- }
其中的 mode 是個(gè)可變值，存在兩個(gè)可選值
- development
1、 適用于開(kāi)發(fā)環(huán)境
2、不會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化
3、打包速度快，適合在開(kāi)發(fā)階段使用，能夠快速響應(yīng)頁(yè)面的更改
- production
1、適用于生產(chǎn)環(huán)境
2 、會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化
3、打包速度很慢，僅適合在項(xiàng)目發(fā)布階段使用
1)配置文件的作用
webpack.config.js 是 webpack 的配置文件，webpack 在真正開(kāi)始打包構(gòu)建之前，會(huì) 先去讀取這個(gè)配置文件，從而基于給定的配置，對(duì)項(xiàng)目進(jìn)行打包
由于 webpack 是基于 node.js 開(kāi)發(fā)出來(lái)的打包工具，因此在它的配置文件中是支持 node.js 相關(guān)的語(yǔ)法和模塊進(jìn)行 webpack 個(gè)性化配置的
然后我們這里先打個(gè) 載入點(diǎn)① ，先回到剛剛說(shuō)到的 webpack 使用，等會(huì)再回來(lái)介紹 webpack!
在Java中有句熟悉的話(huà)：萬(wàn)物皆對(duì)象 ，因此在前端工程中我們同樣有句話(huà)：萬(wàn)物皆模塊
我們已經(jīng)不需要傳統(tǒng)的 js 導(dǎo)入方式：
我們可以在有需要 jquery 的地方使用 import 的方式導(dǎo)入，jquery 是頁(yè)面 index.html 需要的嗎?并不是，而是 index.js 腳本文件需要，所以我們只需要在 index.js 文件中導(dǎo)入
然后我們還需要修改 package.json 文件：
我們新增了 dev 腳本 ，在 script 節(jié)點(diǎn)下的腳本，可以通過(guò) npm run 執(zhí)行。
然后我們?cè)诮K端上運(yùn)行 npm run dev 命令，啟動(dòng) webpack 進(jìn)行項(xiàng)目的打包構(gòu)建
啪一下，很快啊!就在項(xiàng)目目錄中生成了一個(gè) dist 目錄，并存在 main.js 腳本文件
我們繼而在 index.html 文件中引入該 main.js 文件，先直接看結(jié)果，我們右鍵在瀏覽器打開(kāi)
可以發(fā)現(xiàn)，js 運(yùn)行正常，那么 main.js 是啥玩意?
在 **webpack 4.x 和 5.x ** 的版本中有如下默認(rèn)約定：
- 默認(rèn)的打包入口文件為 src/index.js
- 默認(rèn)的輸出文件路徑為 dist/main.js
規(guī)定是die的，人是活的，因此我們可以在 webpack.config.js 中修改打包的默認(rèn)約定!
既然了解了約定，因此我們就可以知道在 main.js 中包含了 index.js 內(nèi)容，我們可以直接查看 main.js 文件，結(jié)果如我們所料：
我們回到之前的 載點(diǎn)① 繼續(xù)剛剛 webpack.config.js 配置文件的說(shuō)明
我們?cè)?webpack.config.js 文件中可以通過(guò) entry 節(jié)點(diǎn)指定打包的入口，然后通過(guò) output節(jié)點(diǎn)指定打包的出口。
這就是我們上面所說(shuō)的打破默認(rèn)規(guī)則!
上面我們也說(shuō)完了 webpack 的基本使用，那我們下面就來(lái)看看 webpack 中的插件使用
三、插件使用
插件 顧名思義就是用來(lái)擴(kuò)展 webpack 的功能，通過(guò)安裝和配置第三方的插件，可以擴(kuò)展 webpack 的能力，從而讓 webpack 使用起來(lái)更加方便。最常用的 webpack 有兩個(gè)：
- webpack-dev-server
1、類(lèi)似于 node.js 階段用到的 nodemon 工具
2、每當(dāng)修改了源代碼，webpack 會(huì)自動(dòng)進(jìn)行項(xiàng)目的打包和構(gòu)建
- html-webpack-plugin
1、類(lèi)似于一個(gè)模板引擎
2、可以通過(guò)此插件自定制 index.html 頁(yè)面中的內(nèi)容
我們先來(lái)看如何使用第一個(gè)插件
1)webpack-dev-server
webpack-dev-server 可以讓 webpack 監(jiān)聽(tīng)項(xiàng)目源代碼的變化，從而進(jìn)行自動(dòng)打包構(gòu)建
① 安裝
使用以下命令即可在項(xiàng)目中安裝該插件
- npm install webpack-dev-server@3.11.2 -D
② 配置
1、需要修改 package.json 中的 script
- "scripts": {
- "dev": "webpack server"
- }
2、運(yùn)行 npm run dev 命令
可以看到一句話(huà)：項(xiàng)目正在運(yùn)行于 localhost:8080/ 。并且運(yùn)行后并沒(méi)有出現(xiàn) dist 目錄
然后我們通過(guò)該地址訪(fǎng)問(wèn)卻沒(méi)有看到我們想要的頁(yè)面，而是需要點(diǎn)擊 src 目錄才能訪(fǎng)問(wèn)
根據(jù)以上結(jié)果，我們可能有如下疑問(wèn)：
- 為什么運(yùn)行 npm run dev 會(huì)出現(xiàn)了一個(gè)訪(fǎng)問(wèn)地址呢?
這是因?yàn)?webpack-dev-server 會(huì)啟動(dòng)一個(gè) 實(shí)時(shí)打包的 http 服務(wù)器
- 打包生成的文件在哪?
想要解答這個(gè)問(wèn)題，我們就得需要知道兩點(diǎn) - 配置和不配置 webpack-dev-server 的區(qū)別
1、不配置 webpack-dev-server 的情況下，webpack 打包生成的文件，會(huì)存放到實(shí)際的物理磁盤(pán)上(根據(jù) output 指定路徑進(jìn)行存放)
2、配置 webpack-dev-server 的情況下，打包生成的文件會(huì)存放到內(nèi)存上，不再根據(jù) output 節(jié)點(diǎn)指定的路徑存放，這樣的好處是提高了實(shí)時(shí)打包輸出的性能，因此內(nèi)存比物理磁盤(pán)速度快很多
- 生成到內(nèi)存中的文件該如何訪(fǎng)問(wèn)?
生成到內(nèi)存中的文件，默認(rèn)是放到了項(xiàng)目的根目錄中，但是是虛擬不可見(jiàn)的，我們可以直接用 / 表示項(xiàng)目根目錄，后面跟上要訪(fǎng)問(wèn)的文件名稱(chēng)， 即可訪(fǎng)問(wèn)內(nèi)存中的文件。
以三個(gè)問(wèn)題收尾，我們來(lái)說(shuō)下一個(gè)插件 html-webpack-plugin
2)html-webpack-plugin
我們上面通過(guò)訪(fǎng)問(wèn) webpack server 給定的 URL 地址，發(fā)現(xiàn)不能直接訪(fǎng)問(wèn)到我們的 index 頁(yè)面，這難免有些缺陷，有缺陷自然就會(huì)有改進(jìn)，這就可以聊到 html-webpack-plugin 這個(gè)插件了~!
① 安裝
老樣子，我們需要通過(guò)以下命令進(jìn)行安裝
- npm install html-webpack-plugin@5.3.2 -D
② 配置
③ 運(yùn)行
我們通過(guò)運(yùn)行 npm run dev ，然后看結(jié)果
通過(guò)該插件，我們可以看到已經(jīng)可以直接通過(guò)路徑訪(fǎng)問(wèn)該頁(yè)面~
這里有小伙伴可能會(huì)提出問(wèn)題，如果我不想通過(guò) 8080 端口可以嗎，甚至不想通過(guò) localhost 訪(fǎng)問(wèn)可以嗎?答案是可以的，我們可以通過(guò) devServer 節(jié)點(diǎn) 對(duì) webpack-dev-server 插件進(jìn)行更多的配置：
- devServer: {
- // 首次打包成功后，自動(dòng)打開(kāi)瀏覽器
- open: true,
- // 在 http 協(xié)議中，如果端口號(hào)是 80，則可以被省略
- port: 8081,
- // 指定運(yùn)行的主機(jī)地址
- host: '127.0.0.1'
- },
然后我們運(yùn)行項(xiàng)目后通過(guò) 127.0.0.1:8081 訪(fǎng)問(wèn)頁(yè)面：
到這里我們就已經(jīng)介紹了兩個(gè)插件的使用，接下來(lái)我們將看點(diǎn)不一樣的東西~!
四、loader使用
我們?cè)陂_(kāi)頭的時(shí)候已經(jīng)說(shuō)過(guò)一句話(huà)，在前端工程化中，萬(wàn)物皆模塊。因此我們可以在 index.js 腳本文件中通過(guò) import 的方式導(dǎo)入 jquery js文件。那遇到 css 文件是否一樣能夠通過(guò) import 導(dǎo)入?我們不妨一試：
當(dāng)我們想要通過(guò) import 的方式導(dǎo)入該 css文件，控制臺(tái)卻給了我們一句話(huà) ：你可能需要一個(gè)適當(dāng)?shù)膌oader來(lái)處理這種文件類(lèi)型，適當(dāng)?shù)?loader?。那就進(jìn)入正題，什么是 loader!
在實(shí)際開(kāi)發(fā)過(guò)程中，webpack 默認(rèn)只能打包處理以 .js 后綴名結(jié)尾的模塊。其他非 .js 后綴名結(jié)尾的模塊，webpack 是處理不了，也就是會(huì)出現(xiàn)我們上面的那種情況，但怎么處理呢?就需要像提示文本所說(shuō)的那樣，我們需要下載一個(gè)適當(dāng)?shù)?loader 來(lái)處理這種文件類(lèi)型。
loader 加載器有許多種，但它們的作用就只有一個(gè)，那就是 幫助 webpack 來(lái)打包處理特定的文件模塊
- css-loader：可以打包處理 .css 相關(guān)的文件
- less-loader：可以打包處理 .less 相關(guān)的文件
- babel-loader： 可以打包處理 webpack 無(wú)法處理的高級(jí) JS 語(yǔ)法
接下來(lái)我們就來(lái)處理上面遇到 css 導(dǎo)包的問(wèn)題
① 安裝
通過(guò)以下命令來(lái)安裝處理 css 文件的 laoder
- npm i style-loader@3.0.0 css-loader@5.2.6 -D
② 配置
我們需要在 webpack .config.js 文件中配置相應(yīng)的 loader 規(guī)則
- module: {
- rules: [
- // 處理 .css 文件的 loader
- { test: /\.css$/, use: ['style-loader', 'css-loader'] },
- ]
- }
③ 運(yùn)行
繼而我們運(yùn)行文件，瀏覽器看效果
該結(jié)果已經(jīng)說(shuō)明了 css-loader 已經(jīng)起到作用了。我們看下規(guī)則的編寫(xiě)方式是怎么樣的：
- { test: /\.css$/, use: ['style-loader', 'css-loader'] }
其中 test 表示匹配的文件類(lèi)型， use 表示對(duì)應(yīng)要調(diào)用的 loader
- use 數(shù)組中的 loader 順序是固定的
- 多個(gè) loader 的調(diào)用順序是 從后往前調(diào)用
其它loader的使用方式與上面一致，都是需要先安裝，然后在 webpack.config.js 文件中配置
1)less-loader
安裝
- npm i less-loader@10.0.1 less@4.1.1 -D
配置
- module: {
- rules: [
- // 處理 .css 文件的 loader
- { test: /\.css$/, use: ['style-loader', 'css-loader'] },
- // 處理 .less 文件的 loader
- { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
- ]
- }
2)babel-loader
安裝
- npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
配置
- module: {
- rules: [
- // 處理 .css 文件的 loader
- { test: /\.css$/, use: ['style-loader', 'css-loader'] },
- // 處理 .less 文件的 loader
- { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
- // 處理JS高級(jí)語(yǔ)法的 loader
- { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
- ]
- }
上面我們看到幾種 loader 的作用，那么其中處理流程是怎么樣的呢?我們用張圖解釋下：
五、打包發(fā)布
完成以上項(xiàng)目開(kāi)發(fā)后，我們就要來(lái)到 打包發(fā)布 的階段，前面所做的一切，到最后肯定都是需要發(fā)布的，那么為了能讓項(xiàng)目在生產(chǎn)環(huán)境中高性能運(yùn)行，就需要對(duì)項(xiàng)目打包發(fā)布。
① 配置
打包發(fā)布同樣需要配置，我們需要在 package.json 文件下的 script 節(jié)點(diǎn) 進(jìn)行配置：
其中 --model 是一個(gè)參數(shù)項(xiàng)，用來(lái)指定 webpack 的運(yùn)行模式，我們?cè)谏厦嬉呀?jīng)介紹過(guò)了~然后通過(guò)指令 npm run build，我們就可以在項(xiàng)目的根路徑下看到我們熟悉的 dist 目錄了
但是如果沒(méi)有指定的規(guī)則配置，默認(rèn)會(huì)將打包后的文件都放到 dist 目錄下，但是如果我們想要將 js 文件 放到 js目錄下，image 文件放到 image 目錄下 我們就需要在 webpack.config.js 進(jìn)行相應(yīng)的配置
前面我們 js 文件的生成目錄已經(jīng)通過(guò) output 節(jié)點(diǎn) 進(jìn)行配置了
那么我們還需要配置其他文件的輸出目錄，這里以圖片類(lèi)型的文件為例：
我們同樣是在 webpack.config.js 文件中配置，不過(guò)此時(shí)是在 rules 節(jié)點(diǎn) 中進(jìn)行配置：
進(jìn)行到這步我們已經(jīng)差不多完成了打包任務(wù)，但是我們?nèi)绻牧?js 生成目錄，這個(gè)時(shí)候會(huì)發(fā)生什么呢?
我們發(fā)現(xiàn)會(huì)生成冗余的文件，并沒(méi)有把舊文件刪除，這難道每次打包都要進(jìn)行手動(dòng)刪除嗎?當(dāng)然不是!為了在每次打包發(fā)布時(shí) 自動(dòng)清理掉 dist 目錄中的舊文件，可以安裝并配置 clean-webpack-plugin 插件
安裝
npm install clean-webpack-plugin@3.0.0 -D
配置
運(yùn)行
六、Source Map
這種 Source Map 就有點(diǎn)意思了，我們后端上線(xiàn)后，如果出現(xiàn)問(wèn)題，我們通常會(huì)進(jìn)入到服務(wù)器中查看報(bào)錯(cuò)日志。那么前端如果出現(xiàn)問(wèn)題就很方便了，我們可以直接通過(guò) F12 打開(kāi)控制臺(tái)查看報(bào)錯(cuò)日志，而且也可以對(duì) js 文件進(jìn)行 debug。但是我們上面說(shuō)過(guò)通過(guò) mode 指定 production 值后會(huì)對(duì)代碼進(jìn)行壓縮，那么調(diào)試是一件即為困難的事情。
Source Map 就是用來(lái)解決這種問(wèn)題的。
1)概念
Source Map 是一個(gè)信息文件，里面存儲(chǔ)著位置信息，也就是 轉(zhuǎn)換后 -> 轉(zhuǎn)換前 的位置映射。在它的幫助下，出錯(cuò)的時(shí)候，可以直接顯示原始代碼，而不是轉(zhuǎn)換后的壓縮代碼，可以在一定程度上提高排錯(cuò)效率。
2)使用
正常在開(kāi)發(fā)環(huán)境下，webpack 是默認(rèn)開(kāi)啟了 Source Map 功能，當(dāng)程序運(yùn)行出錯(cuò)的時(shí)候，可以直接在控制臺(tái)提示錯(cuò)誤位置的信息
但是這種提示是不友好的，它記錄的是壓縮后代碼的位置，這樣導(dǎo)致的問(wèn)題就是實(shí)際運(yùn)行報(bào)錯(cuò)的行數(shù) 與 源代碼的行數(shù) 不匹配，這將成為我們排錯(cuò)路上的 絆腳石 ~!
既然如此，那我們就帶著問(wèn)題解決問(wèn)題!
3)所遇問(wèn)題
① 問(wèn)題 1：實(shí)際運(yùn)行報(bào)錯(cuò)的行數(shù) 與 源代碼的行數(shù) 不匹配
那么要解決這個(gè)問(wèn)題也很簡(jiǎn)單，就需要在 webpack.config.js 中添加以下配置：
配置完查看結(jié)果，至此我們可以發(fā)現(xiàn) 運(yùn)行報(bào)錯(cuò)的行數(shù) 與 源代碼的行數(shù) 是相匹配的!
② 問(wèn)題 2：生產(chǎn)環(huán)境中容易暴露源碼
以上我們雖然已經(jīng)可以定位到源碼的錯(cuò)誤，但是如果在生產(chǎn)環(huán)境中，暴露源碼終歸不是一件好事，因此我們同樣要解決該問(wèn)題。
解決該問(wèn)題的方式也很暴力，直接打包的時(shí)候在webpack.config.js文件中將mode 指定為 production，這樣不會(huì)顯示報(bào)錯(cuò)行數(shù)，也不會(huì)顯示源碼內(nèi)容
- mode: "production"
③ 問(wèn)題 3：生產(chǎn)環(huán)境需顯示行數(shù)隱藏源碼
上面那種方式過(guò)于暴力，行數(shù)和源碼一股腦都不給你顯示了。那有沒(méi)有比較這種的方式，可以顯示行數(shù)但不顯示源碼?答案肯定是有的!我們只需將 devtool 的值配置為 nosources-source-map 即可
- devtool: 'nosources-source-map'
配置完畢我們看效果：
該方式既可以顯示報(bào)錯(cuò)行數(shù)也可以隱藏源碼，是一種十分合適解決方案。
因此我們做個(gè)總結(jié)
4)總結(jié)
- 開(kāi)發(fā)環(huán)境
將 devtool 的值設(shè)置為 eval-source-map ，有利于精準(zhǔn)定位到具體的錯(cuò)誤行
- 生產(chǎn)環(huán)境
關(guān)閉 Source Map 或?qū)?devtool 的值設(shè)置為 nosource-source-map ，有利于防止源碼泄漏，提高安全性
本文題目：后端視野學(xué)Webpack，文武雙全？
鏈接地址：http://www.dlmjj.cn/article/copdgcj.html
