成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

WebPack在單頁項目中的探索

sorra / 2424人閱讀

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

前言

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

thinkjs + vue + vueRouter + webpack 的 SPA配置

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

目錄介紹

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

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

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

靜態(tài)資源文件全放在 www/static 下

前端開發(fā)目錄為 source

前端開發(fā)約定（目錄） 
- source 
    - common          // 公用.vue
    - components      // 對應(yīng)controller下的組件
    - static          // 第三方靜態(tài)資源
    - unitTest        // 數(shù)據(jù)測試json
    - views           // 頁面
    index.html        // 主站入口html
    index.sass        // 主站全局sass
    main.js           // 主站入口js
    router.js         // 主站路由
難點

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

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

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

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

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

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

模板html文件

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

//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
結(jié)合后臺測試 
npm run start

主站 http://localhost:8360

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/79265.html

相關(guān)文章

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

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

    Alex 評論0 收藏0

  • webpack單頁應(yīng)用多路由多骨架屏插件

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

    pingan8787 評論0 收藏0

  • 基于 NPM 的大型 React 單頁應(yīng)用探索（多場景多方案）

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

    tinylcy 評論0 收藏0

  • 指尖前端重構(gòu)（React）技術(shù)調(diào)研分析

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

    AlphaWallet 評論0 收藏0

  • Webpack 2 中一些常見的優(yōu)化措施

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

    zoomdong 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<