vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别

摘要：而多页面应用的入口文件是所有需要用到的页面。单文件应用和多文件应用上，是大同小异的，区别就讨论到这里了。

这几天，都遇到过有人问过相似的问题，就是用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", //