1.前言
这几天，都遇到过有人问过相似的问题，就是用vue和webpack搭建目录的时候，怎么把单页面应用的配置改成多文件应用，或者是怎么把多文件应用的配置改成单文件应用。这个情况，我之前有处理过，公司的同事教过我，我就针对这个情况写下此篇文章。各位如果觉得我哪里写得不够好，写错了，欢迎指出，大家一起进步。
2.说明
首先，我用的vue和webpack的版本都是2.x的，请大家留意自己使用的版本，特别是webpack的版本，1和2还是有些区别的。
然后，项目搭建的流程我不多说了，之前写过文章，网上也有很多好文章值得学习。接下来我只针对webpack.config.js这个配置文件说明，因为我做项目的时候，改动的基本就是这里，项目的文件虽然也有写法上的改动，但是那个改动相信不会难到大家，如果真的不知如何下手，我往后可能会再写文章。
3.单文件应用的配置
由于现在单文件应用写得比较多，一开始我就先放单文件应用的配置文件吧，代码如下
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', // 4.多文件应用的配置
多文件现在用的不算很多，主要有时候会负责公司一些活动的小项目会用到，代码如下。
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/';//通过getEntry函数获取所有js脚本let jsEntries = getEntry('./src/js/page/*.js');//IP地址let IPAddress = getIPAdress();let serverHost = IPAddress;let config = { //入口文件 entry: jsEntries, // entry: { // index:jsEntries, // vendors: ['vue', 'vue-router','vue-resource'] // 需要进行单独打包的文件 // }, //出口文件 output: { path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它 publicPath: publicPath, //模板、样式、脚本、图片等资源对应的server上的路径 filename: 'js/[name].js', //每个页面对应的主js的生成配置 chunkFilename: 'js/[id].chunk.js?[chunkhash]' //chunk生成的配置 }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { scss: 'vue-style-loader!css-loader!sass-loader', // 5.区别总结
一对比，区别就是出来了，但是写法是大同小异的。有区别是主要是下面几点
1.入口文件的区别，单页面应用入口文件是就是一个index.js（'src/js/page/index.js'）。而多页面应用的入口文件是所有需要用到的页面let jsEntries = getEntry('./src/js/page/*.js');。（getEntry方法是返回一个目录下所有的.js文件的名称和路径，jsEntries就是一个对象数组，里面包含着./src/js/page目录下所有的.js文件的名称和路径）
2.在多文件应用的配置中，HtmlWebpackPlugin这个插件是提取出来，在遍历getEntry('./src/html/*.html')的过程中，执行一次就往配置(config.plugins)那里push一次（config.plugins.push(new HtmlWebpackPlugin(conf))）。为什么这样写，大家应该很清楚了，有多少个入口文件，就得写多少次这个插件，new HtmlWebpackPlugin多少次，如果入口文件只有一两个，两三个还好，如果有100个入口文件，岂不是要在config.plugins那里写100次new HtmlWebpackPlugin，所以就标题文字遍历了，方便点。
结语
好了。单文件应用和多文件应用上，webpack.config.js是大同小异的，区别就讨论到这里了。如果文章觉得那里写得不好或者写错了，欢迎指出。同时也希望，这篇文章能帮到大家！