webpack資源管理

①webpack不僅可以打包j**ascript模組，甚至它把網頁開發中的一切資源的都可以當作模組來打包處理

②但是webpack本身不支援，它只是乙個打包平台，其他資源，例如css、less、sass、img等資源需要結合外掛程式來實現，這些外掛程式在webpack裡被稱為loader（載入器）

1、打包 css模組

①安裝依賴：style-loader css-loader

css-loader 的作用是把css檔案轉為j**ascript模組

//style-loader的作用是動態的建立style節點插入到head中

npm install

--s**e-dev style-loader css-loader

②準備css檔案，並載入

②配置（module部分）

//
該檔案其實最終是要在node環境下執行的
const path = require('path')
//匯出乙個具有特殊屬性配置的物件
module.exports =,
module:]}
}

③打包

npm run build

2、打包資源

①安裝依賴：file-loader

npm install --s**e-dev file-loader

②準備和其他檔案

③配置

//
該檔案其實最終是要在node環境下執行的
const path = require('path')
//匯出乙個具有特殊屬性配置的物件
module.exports =,
module:,]}
}

④問題：當執行打包指令，會發現已經打包成功，但是開啟index.html會發現沒有載入到，原因就是資源位於打包結果dist資料夾下，無法被訪問到，解決方案就是把index.html放到dist目錄裡。但是dist是打包編譯的結果，而非原始碼，所以把index.htm放到dist就不合適。而且，如果打包結果的檔名bundle.js一旦改變，則index.html裡script引入也要手動修改。綜合以上遇到的問題，可以使用乙個外掛程式html-web-plugin，解決上面兩個問題

⑤安裝依賴：html-webpack-plugin

npm install --s**e-dev html-webpack-plugin

⑥配置

//
該檔案其實最終是要在node環境下執行的
const path = require('path')
const htmlwebpackplugin 
= require('html-webpack-plugin')
//匯出乙個具有特殊屬性配置的物件
module.exports =,
plugins:[
//該外掛程式可以把index.html打包到bundle.js檔案所屬目錄，跟著bundle走
//同時也會自動在index.html中注入script引用鏈結，並且引用的資源名稱，也取決於打包的檔名稱
newhtmlwebpackplugin()
], module:,]}
}

可以把根目錄index.html的script引用注釋

⑦打包

3、打包less檔案，font字型、sass檔案等更多資源檢視文件：

4、補充：如果實時監控**改變，並且自動打包和打包後自動重新整理瀏覽器，可以使用外掛程式 webpack-dev-server

①安裝依賴

npm install--s**e-dev webpack-dev-server

②配置

//
該檔案其實最終是要在node環境下執行的
const path = require('path')
const htmlwebpackplugin = require('html-webpack-plugin')
//匯出乙個具有特殊屬性配置的物件
module.exports =,
devserver:,
plugins:[
//該外掛程式可以把index.html打包到bundle.js檔案所屬目錄，跟著bundle走
//同時也會自動在index.html中注入script引用鏈結，並且引用的資源名稱，也取決於打包的檔名稱
newhtmlwebpackplugin()
],module:,]}
}

③配置npm script

"keywords": ,

"author": "",

"license": "isc",

"devdependencies":

}

④執行指令：該工具會自動打包，打包完畢後會自動開啟乙個伺服器，預設監聽8080埠，同時自動開啟瀏覽器訪問，接下來會自動監視**的改變，然後自動編譯，編譯完畢，自動重新整理瀏覽器。

npmrun dev

webpack資源管理

MTK資源管理

MTK資源管理

linux 資源管理

webpack資源管理

MTK資源管理

MTK資源管理

linux 資源管理

相關推薦