webpack+vue能很好的完成單頁面應用的開發，官方也提供了很多例子和教程。但使用webpack能不能用到多頁面專案中，同時又能使用vue進行模組元件化開發呢？
這裡將結合具體的專案，說明一下我是如何配置的。我們希望能在專案裡做到
下面是我們專案的目錄結構
│ └─home
│ └─view (線上使用者訪問的.html目錄)
│ └─index (生成的乙個模組）
│ ├─index.html (同一模組的模板放在乙個模組目錄下)
│ └─info.html
├─public (線上資源檔案目錄)
│ ├─css
│ ├─imgs
│ ├─js
│ └─...
└─source (前端開發目錄)
├─another (乙個業務模組,每個業務下可能有多個頁面)
│ └─index
│ ├─index.html
│ ├─index.js
│ └─static (資源檔案)
├─components (vue元件目錄)
│ ├─a
│ │ ├─a.vue
│ │
│ └─b
│ ├─b.vue
│
└─index (乙個業務模組,每個業務下可能有多個頁面)
├─index
│ ├─index.html
│ ├─index.js
│ └─static
└─info
└─info.html
每個頁面都是乙個資料夾，所需的資源檔案也都放在這個資料夾下，不需要這個頁面時，也只需要刪除這個資料夾。
下面是index模組下的index頁面
下面index頁面對應的js入口檔案
import vue from 'vue'
new vue()
var path = require('path');
var webpack = require('webpack');
// 將樣式提取到單獨的css檔案中，而不是打包到js檔案或使用style標籤插入在head標籤中
var extracttextplugin = require('extract-text-webpack-plugin');
// 生成自動引用js檔案的html
var htmlwebpackplugin = require('html-webpack-plugin');
var glob = require('glob');
var entries = getentry('./source/**/*.js'); // 獲得入口js檔案
var chunks = object.keys(entries);
module.exports = ,
resolve: ,
module: ,,,
}]
},babel: ,
vue:
},plugins: [
// 提取公共模組
new webpack.optimize.commonschunkplugin(),
// 配置提取出的樣式檔案
new extracttextplugin('css/[name].css')
]};var prod = process.env.node_env === 'production';
module.exports.plugins = (module.exports.plugins || );
if (prod)
}),new webpack.optimize.uglifyjsplugin(
}),new webpack.optimize.occurenceorderplugin()
]);} else
var pages = getentry('./source/**/*.html');
for (var pathname in pages)
};if (pathname in module.exports.entry)
// 需要生成幾個html檔案，就配置幾個htmlwebpackplugin物件
module.exports.plugins.push(new htmlwebpackplugin(conf));
}// 根據專案具體需求，具體可以看上面的專案目錄，輸出正確的js和html路徑
// 針對不同的需求可以做修改
function getentry(globpath) ,
basename, tmp, pathname;
glob.sync(globpath).foreach(function (entry) );
console.log(entries);
return entries;
開發環境中使用npm run dev命令，訪問 localhost:8080/view/index/index.html 可以得到webpack-dev-server開發伺服器下的其中乙個頁面，由於支援熱替換，修改源**可以看到頁面發生了變化
總結一下webpack幫我們做了下面幾件事
在新專案下使用rbc許可權
例子說明 8個步驟 2.把遷移過來的rbac下migrations記錄刪除 3.把rabc註冊到專案中 4.建立資料庫遷移 5.註冊admin，錄入資料 自動發現並錄入許可權url 6.在登入流程中初始化許可權資訊 7.註冊中介軟體 rbac.middleware.rbac.rbacmiddlewa...
怎樣在vue專案下新增ESLint
eslint官網 eslint中文官網 如果你是想在自己的專案裡搭建eslint，就可以按照官網的指示，以全域性安裝舉例，npm install g eslint然後初始化 eslint init它會問你一些問題，你可以按照你的喜好進行配置，我選的是popular下面的standard，生成的檔案是...
vue多頁面專案使用全域性Loading元件
多頁面vue應用中，在請求介面之前統一加上loading作為未請求到資料之前的過渡展示。由於多頁面未使用vuex做狀態管理，只在入口統一註冊了bus，所以此例子使用eventbus做事件通訊。這個loading元件用showloading控制展示與否。class loading v show sho...