WebPack在單頁項目中的探索

前言

以前介紹了 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