前端如何快速實現構建

2021-10-01 03:55:43 字數 1780 閱讀 1508

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...