1. 程式人生 > 實用技巧 >webpack - 專案與腳手架

webpack - 專案與腳手架

昨天開始看深入淺出webpack這本書,之前對webpack有過一些瞭解,但是對webpack搭建腳手架,以及專案架構的關係一直有一個概念性的錯誤理解。之前也一直疑惑這個點,直到昨晚和大哥聊到這個問題,當時順便看了下公司專案的腳手架,才分清楚二者之前的關係,現在想明白了,當時的疑惑點在哪,原來以為專案架構就是腳手架,其實不是這麼回事,我們把vue-cli腳手架根據相應初始化命令自動生成的專案架構當成腳手架的原因是,初學webpack的時候,知道學會webpack就可以自己搭建腳手架,或是對現有腳手架進行一些豐富或是修改,然後對vue-cli生成的專案架構中的build、config資料夾中的js檔案進行修改(豐富自己的專案架構)就以為是對腳手架進行了修改,其實不是一個概念,vue-cli腳手架是使用webpack進行開發的,它將打包配置這些東西暴露了出來,讓開發人員自己可以對自己的專案打包編譯的內容過程可以自定義(增加npm命令、執行指令碼、配置loader、外掛等),公司的腳手架這部分內容就寫在了腳手架的內部,所以要進行修改相關部分內容的時候,只能去修改公司腳手架的原始碼。舉個例子:如果你想在專案中安裝jQuery,你不可能在腳手架中將jQuery提供,只能在專案中安裝,採用nmp的方式,在build資料夾中對應的js檔案中進行配置,

// 新增程式碼
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        jquery: "jquery",
        "window.jQuery": "jquery"
     })
],    

所以我們僅就是在專案中使用webpack的內容對專案進行豐富和修改。

我們初始化以vue-cli腳手架搭建的專案時,執行的是 vue init webpack project_name,會對應執行相應的初始化指令碼,然後生成專案結構。

這就是我之前一直對腳手架和專案內容混淆的部分,可能說的不是很清楚。權當記錄。