以前介紹了 webpack在多頁項目中的探索那篇有極大得不住,還有極大得改善空間,並不完美,不建議用在生產環境,實際上是如今不想去優化,懶 :)
javascript
thinkjs + vue + vueRouter + webpack 的 SPA配置html
(其實能夠看個人一個repo thinkjs+vue的單頁blog嘗試 )前端
因爲後臺使用了 thinkjs
框架的ES6模式vue
src
爲後臺編寫文件, app
則爲後臺編譯後的文件java
線上的頁面須要放在 view/home
下webpack
靜態資源文件全放在 www/static
下git
前端開發目錄爲 source
github
- source - common // 公用.vue - components // 對應controller下的組件 - static // 第三方靜態資源 - unitTest // 數據測試json - views // 頁面 index.html // 主站入口html index.sass // 主站全局sass main.js // 主站入口js router.js // 主站路由
output要好好設置,這涉及到開發環境下,你的路徑去哪裏找js.以及build後線上環境又是怎麼樣的個路徑去找jsweb
有的人可能有疑問,vue-cli生成的項目.爲何直接 npm run dev
就能夠開始跑了呢?明明連js文件都沒有,瀏覽器怎麼還能找到文件呢?vue-cli
其實這就是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,而後感覺下具體是怎麼樣的過程.
在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 })
別的基本大同小異,我就不具體再介紹一次了
npm run dev
主站 http://localhost:8200/source/index.html
npm run build
npm run start