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

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

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

然后，項(xiàng)目搭建的流程我不多說了，之前寫過文章，網(wǎng)上也有很多好文章值得學(xué)習(xí)。接下來我只針對(duì)webpack.config.js這個(gè)配置文件說明，因?yàn)槲易鲰?xiàng)目的時(shí)候，改動(dòng)的基本就是這里，項(xiàng)目的文件雖然也有寫法上的改動(dòng)，但是那個(gè)改動(dòng)相信不會(huì)難到大家，如果真的不知如何下手，我往后可能會(huì)再寫文章。

由于現(xiàn)在單文件應(yīng)用寫得比較多，一開始我就先放單文件應(yīng)用的配置文件吧，代碼如下

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");
/*
 一個(gè)根據(jù)模式匹配獲取文件列表的node模塊。
 有關(guān)glob的詳細(xì)用法可以在這里看到——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"] // 需要進(jìn)行多帶帶打包的文件
    },
    //出口文件
    output: {
        path: path.join(__dirname, "dist"), //輸出目錄的配置，模板、樣式、腳本、圖片等資源的路徑配置都相對(duì)于它
        publicPath: publicPath,                //模板、樣式、腳本、圖片等資源對(duì)應(yīng)的server上的路徑
        filename: "js/[name].js",            //每個(gè)頁面對(duì)應(yīng)的主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", //