WebPack在單頁項目中的探索

sorra 發布于2019-08-19 18:10 / 2347人閱讀

摘要：前言之前介紹了在多頁項目中的探索那篇有極大得不住，還有極大得改善空間，并不完美，不建議用在生產環境，其實是現在不想去優化，懶的配置其實可以看我的一個的單頁嘗試目錄介紹由于后臺使用了框架的模式為后臺編寫文件則為后臺編譯后的文件線上的頁面需要放

前言

之前介紹了 webpack在多頁項目中的探索
那篇有極大得不住，還有極大得改善空間，并不完美，不建議用在生產環境，其實是現在不想去優化，懶 :)

thinkjs + vue + vueRouter + webpack 的 SPA配置

(其實可以看我的一個repo thinkjs+vue的單頁blog嘗試 )

目錄介紹

由于后臺使用了 thinkjs 框架的ES6模式

src 為后臺編寫文件, app 則為后臺編譯后的文件

線上的頁面需要放在 view/home 下

靜態資源文件全放在 www/static 下

前端開發目錄為 source

前端開發約定（目錄）

- source 
    - common          // 公用.vue
    - components      // 對應controller下的組件
    - static          // 第三方靜態資源
    - unitTest        // 數據測試json
    - views           // 頁面
    index.html        // 主站入口html
    index.sass        // 主站全局sass
    main.js           // 主站入口js
    router.js         // 主站路由

難點

output要好好設置,這涉及到開發環境下,你的路徑去哪里找js.以及build后線上環境又是怎么樣的個路徑去找js

有的人可能有疑問,vue-cli生成的項目.為什么直接 npm run dev 就可以開始跑了呢?明明連js文件都沒有,瀏覽器怎么還能找到文件呢?

其實這就是webpack的一個強大之處,在dev過程中,js的確有編譯,但是僅僅是編譯在內存中,你的確看不見那個文件,所以一樣可以使用 (可以看看這個：http://www.meckodo.com/?p=721)

了解這一點后,我們的output就很明白到底要如何設置了

output: {
        path: path.resolve(__dirname, "./www/static"),
        publicPath: "/static/",
        chunkFilename: "js/[id].js",
        filename: "[name].build.js"
    }

文字表達的確很難能感受到是為什么,建議大家clone我這個repo,然后感受下具體是怎么樣的過程.

模板html文件

在SPA中,我們就可以用webpack插件來為我們生成html模板到所對應的目錄了.

//webpack的plugin里加入以下插件
new HtmlWebpackPlugin({ //為了配合thinkjs的目錄定義 需要輸出在view/home/[controller]/index.html 下
            filename : "../../view/home/index/index.html",
            template : "./source/index.html",
            inject:false
        })

別的基本大同小異,我就不具體再介紹一次了

dev

npm run dev

主站 http://localhost:8200/source/index.html

build

npm run build

結合后臺測試

npm run start

主站 http://localhost:8360

GPU云服務器云服務器 java項目中的調度服務器中的項目路徑 webrtc項目中的stl庫在哪里深度探索

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79265.html

毫無色彩的二哲和他的巡禮之年

摘要：前戲今年，對于我個人而言遭遇了三個重大的轉折點。盡可能的把溝通成本用約定和文檔降低。學習的這一年可以說年的學習，在上半年的精力，放在了技術上。而下半年則相反。前戲今年，對于我個人而言遭遇了三個重大的轉折點。 15年9月大三休學創業，16年9月重新復學大三在2016年4月順利引進天使輪，公司從廈門集美區搬到了深圳南山區 16年底，我們正在準備接入A輪 16年與15年相比，總體來...

Alex 2019-08-20 14:05 評論0 收藏0
webpack單頁應用多路由多骨架屏插件

摘要：前言在單頁應用中可能會有一些特殊情況，需要不同的路由下顯示不同的首骨屏。一般這種需求可以后端動態生成包含首骨屏代碼實現，但如果想要純前端實現的話目前并未發現比較好的庫或插件。例如首骨屏模板前言在單頁應用中可能會有一些特殊情況，需要不同的路由下顯示不同的首骨屏。比如新聞列頁和新聞詳情頁。一般這種需求可以后端動態生成包含首骨屏代碼HTML實現，但如果想要純前端實現的話目前并未發現比較好...

pingan8787 2019-08-26 10:39 評論0 收藏0
基于 NPM 的大型 React 單頁應用探索（多場景多方案）

摘要：基于的大型單頁應用探索多場景多方案原文地址未完待續本文目標構建基于的大型單頁應用以及多頁面，支持多模塊協同開發分布式構建與發布。基于 NPM 的大型 React 單頁應用探索（多場景多方案）原文地址：https://github.com/luqin/blog/issues/10 未完待續…… 本文目標構建基于 NPM 的大型 React 單頁應用（以及多頁面），支持多模塊協同開發、...

tinylcy 2019-08-22 10:59 評論0 收藏0
指尖前端重構（React）技術調研分析

摘要：一為什么選擇是當前前端應用最廣泛的框架。目前來看的生態系統要比大的多，在等最大的技術社區搜索兩者，的搜索結果是的十倍左右，另外據近期統計使用的站點是的幾百倍以上。其中是基于技術，依然是瀏覽器應用。一、為什么選擇React React是當前前端應用最廣泛的框架。三大SPA框架 Angular、React、Vue比較。 Angular出現最早，但其在原理上并沒有React創新的性能優化...

AlphaWallet 2019-08-23 18:18 評論0 收藏0
Webpack 2 中一些常見的優化措施

摘要：所以我們應該分析業務依賴和路由，盡可能將所有組件的公共依賴提取出來。文件分離文件分離主要是將圖片和從中分離。在生產環境下，可以考慮將圖片和從中分離。 Webpack 2中一些常見的優化措施分離第三方依賴在開發環境下, 通常會采取 HMR 模式來提高開發效率. 但一般情況下, 我們只會更改自身的業務文件, 不會去更改第三方的依賴, 但 webpack 在 rebuild 的時候, 依...

zoomdong 2019-08-20 17:06 評論0 收藏0