成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

WebPack在單頁項(xiàng)目中的探索

sorra / 2381人閱讀

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

前言

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

thinkjs + vue + vueRouter + webpack 的 SPA配置

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

目錄介紹

由于后臺(tái)使用了 thinkjs 框架的ES6模式

src 為后臺(tái)編寫文件, app 則為后臺(tái)編譯后的文件

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

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

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

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

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

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

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

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

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

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

模板html文件

在SPA中,我們就可以用webpack插件來為我們生成html模板到所對(duì)應(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é)合后臺(tái)測(cè)試 
npm run start

主站 http://localhost:8360

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79265.html

相關(guān)文章

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

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

    Alex 評(píng)論0 收藏0

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

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

    pingan8787 評(píng)論0 收藏0

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

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

    tinylcy 評(píng)論0 收藏0

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

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

    AlphaWallet 評(píng)論0 收藏0

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

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

    zoomdong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<