1.entry
webpack 查詢依賴的入口檔案配置,入口檔案既可以乙個也可以是多個。
單頁面應用入口配置
通常做法配置:
index.js 單頁面應用入口檔案,vendor.js 第三方依賴庫,polyfill.js 特性填充庫,
// 匯出配置
module.exports = ,
}
多頁面應用入口配置
和單頁面應用類似,但不同頁面會不同有入口檔案,這種情況高效的做法就不是直接寫死在 entry 裡面了,而是通過生成 webpack.config 時,掃瞄指定目錄確定每個頁面的入口檔案以及所有的頁面。
例如:你的頁面都放置在 src/pages 目錄下面,並且你的每個頁面單獨乙個目錄,並且其中有 index.html 和 index.js
配置如下:
const path = require('path');
const fs = require('fs');
// 處理公共entry
const commonentry = ['./src/vendor.js', './src/polyfill.js'];
// 頁面目錄
const pages_dir = './src/pages/'; const entry = {};
// 遍歷頁面目錄
const getpages = () => x`; // js
} if (!fs.existssync(filepath))
return true;
});}; getpages(options).foreach(file => /$/index`];
});// 匯出配置 module.exports = ;
那麼,入口 boundle 如何插入對應的 html 中
const plugins = ;
if (mode === 'single') )
);}if (mode === 'multi') /$/index.html`;
// 新增runtime指令碼,和頁面入口指令碼
const chunks = [`runtime~$`, name];
plugins.push(
new htmlwebpackplugin(.html`,
template: file,
chunks,
}));
});}// 匯出配置
module.exports = ;
2.output
}
3.resolve
resolve: ,
}
擴充套件如果你使用了絕對路徑後,可能就發現vscode智慧型**導航就失效了,別慌!請在想目錄下面配置jsconfig.json
檔案解決這個問題,配置和上面對應:
},"include": ["./src/**/*"]
}
4.module
module:
]
如何快速構建物聯網原型?
原文 how to be strategic about building your iot prototype 翻譯 安翔 審校 蘇宓 建立物聯網 iot 原型對於工程師來說是具有成就感,有時卻令人沮喪的過程之一。你接通 iot 原型裝置的電源,開啟電源開關,這一次信心滿滿,心想 這一次應該可以正...
如何快速構建CMBD系統 glpi
指令碼後續更新及迭代將由kkitdeploy專案代替 起初,開發這套cmbd系統是為了幫助朋友公司簡化裝置統計操作,以代替人工入庫方式。舉個例子,單位發放筆記本,或者裝置更換了硬碟,都需要人工簽到,手動輸入統計,安裝了cmbd系統後,系統就可以自動定時收集裝置資訊,以此來減少人工操作。下面給大家簡單...
前端開發使用vue腳手架快速構建前端專案
vue 提供了乙個官方的 cli,為單頁面應用 spa 快速搭建繁雜的腳手架。node v 檢測是否安裝成功npm install g vue cli vue version 檢測是否安裝成功 vue init webpack 資料夾名稱runtime compiler recommended fo...