Webpack4 學習筆記五 圖片解析、輸出的文件劃分目錄
阿新 • • 發佈:2019-01-20
exports 學習 返回 tro plugin filename ref clas mit
前言
此內容是個人學習筆記,以便日後翻閱。非教程,如有錯誤還請指出
webpack打包圖片和劃分文件路徑
使用圖片的方式
- 通過 new Image()
- 在 css中設置 background-image
- 在 html中使用img標簽引用圖片
需要一個合適的 loader,對圖片進行處理
file-loader: 指示 webpack將所需對象作為文件發出並返回其公共URL
url-loader: 以base64編碼的URL加載文件,減少http請求。
cnpm i file-loader url-loader --save-dev
weebpack配置:
module.exports = { ... module: { rules: [ { test: /.css$/, use: [‘style-loader‘, ‘css-loader‘] }, { test: /\.(png|jpg|gif)$/, use: { loader: ‘url-loader‘, options: { limit: 10000, // 小於 8kb的圖片轉換為base64編碼,減少http請求 } } } ] } }
劃分文件路徑
輸出後的資源如 css文件,圖片文件想要給他們劃分文件夾。 如css的文件都方法 css的文件夾下, 圖片都放在 images文件夾下
基上面代碼,webpack配置
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘) module.exports = { ... module: { rules: [ { test: /.css$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader‘] }, { test: /\.(png|jpg|gif)$/, use: { loader: ‘url-loader‘, options: { limit: 10000, // 小於 8kb的圖片轉換為base64編碼,減少http請求 outputPath: ‘/images‘ } } } ] }, plugins: [ new MiniCssExtractPlugin({ filename: ‘/css/[name].css‘ }) ] }
css、html等文件的引用路徑會自動改變。
筆記地址
Webpack4 學習筆記五 圖片解析、輸出的文件劃分目錄