VUE2X實戰開發隨筆(二)

vue的單頁面應用開發會把頁面中全部的文件都會打包在build.js文件中，這樣可能這個文件變得很大，對性能，體驗都不是很好的選擇；

單頁面應用改成多頁面應用的方法：

•  開始改造

       最主要的一步，將webpack進行改造以知足對多頁面需求的支持，其實多頁面，便是webpack有多個入口。在此步中，咱們主要的操做的對象是 build文件夾下的js文件。

• 首先，咱們對 utils.js進行改造
• 添加一個方法：getEntries，方法中須要使用到node的globa模塊，因此須要引入 

// glob模塊，用於讀取webpack入口目錄文件 var glob = require('glob');

exports.getEntries = function (globPath) { 

• 其次，對webpack.base.conf.js進行改造
• 刪除 entry: {app: './src/main.js'},，取而代之以下：

module.exports = { ··· entry: utils.getEntries('./src/module/**/*.js'),

• 最後改造webpack.dev.conf.js和webpack.prod.conf.js
• 移除原來的HtmlWebpackPlugin

var pages = utils.getEntries('./src/module/**/*.html') for(var page in pages) { // 配置生成的html文件，定義路徑等 var conf = { filename: page + '.html', template: pages[page], //模板路徑 inject: true, // excludeChunks 容許跳過某些chunks, 而chunks告訴插件要引用entry裏面的哪幾個入口 // 如何更好的理解這塊呢？舉個例子：好比本demo中包含兩個模塊（index和about），最好的固然是各個模塊引入本身所需的js， // 而不是每一個頁面都引入全部的js，你能夠把下面這個excludeChunks去掉，而後npm run build，而後看編譯出來的index.html和about.html就知道了 // filter：將數據過濾，而後返回符合要求的數據，Object.keys是獲取JSON對象中的每一個key excludeChunks: Object.keys(pages).filter(item => { return (item != page) }) } // 須要生成幾個html文件，就配置幾個HtmlWebpackPlugin對象 module.exports.plugins.push(new HtmlWebpackPlugin(conf)) }　　

• 打開工程

npm run dev

在dev.server.js 文件中有打開的路徑，直接跟你想要打開的html文件名

如：

var uri = 'http://localhost:' + port +'/xxx.html'