摘要：而多頁面應用的入口文件是所有需要用到的頁面。單文件應用和多文件應用上，是大同小異的，區別就討論到這里了。

這幾天，都遇到過有人問過相似的問題，就是用vue和webpack搭建目錄的時候，怎么把單頁面應用的配置改成多文件應用，或者是怎么把多文件應用的配置改成單文件應用。這個情況，我之前有處理過，公司的同事教過我，我就針對這個情況寫下此篇文章。各位如果覺得我哪里寫得不夠好，寫錯了，歡迎指出，大家一起進步。

首先，我用的vue和webpack的版本都是2.x的，請大家留意自己使用的版本，特別是webpack的版本，1和2還是有些區別的。

然后，項目搭建的流程我不多說了，之前寫過文章，網上也有很多好文章值得學習。接下來我只針對webpack.config.js這個配置文件說明，因為我做項目的時候，改動的基本就是這里，項目的文件雖然也有寫法上的改動，但是那個改動相信不會難到大家，如果真的不知如何下手，我往后可能會再寫文章。

由于現在單文件應用寫得比較多，一開始我就先放單文件應用的配置文件吧，代碼如下

let path = require("path");
let webpack = require("webpack");
/*
 html-webpack-plugin插件，webpack中生成HTML的插件，
 具體可以去這里查看https://www.npmjs.com/package/html-webpack-plugin
 */
let HtmlWebpackPlugin = require("html-webpack-plugin");
/*
 一個根據模式匹配獲取文件列表的node模塊。
 有關glob的詳細用法可以在這里看到——https://github.com/isaacs/node-glob
 */
let glob = require("glob");
/*
 webpack插件
 */
let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
let publicPath = "/dist/";
//IP地址
let serverHost = getIPAdress();
let config = {
    //入口文件
    entry: {
        index: path.resolve(__dirname, "src/js/page/index.js"),
        vendors: ["vue", "vue-router","vue-resource","vuex","element-ui","element-ui/lib/theme-default/index.css"] // 需要進行多帶帶打包的文件
    },
    //出口文件
    output: {
        path: path.join(__dirname, "dist"), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對于它
        publicPath: publicPath,                //模板、樣式、腳本、圖片等資源對應的server上的路徑
        filename: "js/[name].js",            //每個頁面對應的主js的生成配置
        // chunkFilename: "js/[name].asyncChunk.js?[chunkhash]"   //chunk生成的配置
        chunkFilename: "js/[name].asyncChunk.js?"+new Date().getTime() //chunk生成的配置
    },
    module: {
        //加載器
        rules: [
            {
                test: /.vue$/,
                loader: "vue-loader",
                options: {
                    loaders: {
                        scss: "vue-style-loader!css-loader!sass-loader", //