[TOC]
vue-cli用来构建单页面应用很方便，直接生成一个vue-cli模板即可，最近一项目刚结束，为了后面的二期项目，想着用vue来重新搭建项目框架，实现前后端分离开发，也算是一个新的探索吧。跟大家分享一下一个新手入门时遇到的困惑不解，希望能帮到正处在迷茫期的你。
工程目录
modules下为多个页面入口，文件名称保持一致，如：
modules
|---index
|---index.html
|---index.js
.vue文件名称任意。
原则上这些文件名称都可以随意定，但由于下面entry入口函数的限定，换成其他名字可以会找不到。如果想要起其他文件名，请相应修改getMultiEntry()函数。
添加多入口
until.js
until.js中添加getMultiEntry()，依赖 glob插件，需要提前下载好，until.js开始引入
//获取多级的入口文件
exports.getMultiEntry = function (globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-4);
var pathsrc = tmp[0]+'/'+tmp[1];
if( tmp[0] == 'src' ){
pathsrc = tmp[1];
}
//console.log(pathsrc)
pathname = pathsrc + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;
//console.log(pathname+'-----------'+entry);
});
return entries;
}
~\build\webpack.base.conf.js
找到entry，添加多入口
entry:entries,
运行、编译的时候每一个入口都会对应一个Chunk。 PS：终于明白这个chunk的含义了/(ㄒoㄒ)/~~
~\build\webpack.dev.conf.js
文末添加以下配置：
var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html');
for (var pathname in pages) {
// 配置生成的html文件，定义路径等
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
chunks: [pathname, 'vendors', 'manifest'], // 每个html引用的js模块
inject: true // js插入位置
};
// 需要生成几个html文件，就配置几个HtmlWebpackPlugin对象
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
其中config.moduleName = 'modules'
~\build\webpack.prod.conf.js
...
//构建生成多页面的HtmlWebpackPlugin配置，主要是循环生成
var pages = utils.getMultiEntry('./src/'+config.moduleName+'/**/*.html');
for (var pathname in pages) {
var conf = {
filename: pathname + '.html',
template: pages[pathname], // 模板路径
chunks: ['vendor',pathname], // 每个html引用的js模块
inject: true, // js插入位置
hash:true
};
webpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
module.exports = webpackConfig
其中config.moduleName = 'modules'
至此，多页面的配置已经完成。访问地址为：
index : http://localhost:8088/modules/index.html
phone : http://localhost:8088/modules/phone.html
cnpm run build之后，在nginx中即可访问，访问地址为
index : http://localhost/modules/index.html
phone : http://localhost/modules/phone.html
其他相关配置
示例
module.exports = {
entry: {
index: './src/pages/index/index.js',
list: './src/pages/list/index.js',
common: [
'./src/base/base.js',
'./src/base/base.css'
]
},
output: {
path: './asset/build/', // 文件编译输出路径改成 build
publicpath: 'http://yourweb.com/asset/build/', // 这里替换成线上实际地址，可以修改 css 中对图片资源的引用路径。
filename: '[name]_[hash:5].js' // 生成的文件名字，加上了5位的 hash值。当然了，位数和加hash的位置，你可以自己定义，比如 '[name].js?[hash]'.
},
// 其它配置...
};
entry配置入口文件，多入口会独立打包3个实体。分别是 index.js, list.js, common.js。
webpack别名 resolve.alias
resolve: {
alias: {
moment: "moment/min/moment-with-locales.min.js"
}
}
这样待打包的脚本中的require('moment');其实就等价于require('moment/min/moment-with-locales.min.js');通过别名的使用在本例中可以减少几乎一半的时间。
output.filename缓存参数
filename: '[name].[hash].js'
生成 vendors.61714a310523a3df9869.js,每次生成都不会覆盖之前的代码，以方便查BUG或者回滚。
第二种方法：
filename: '[name].js'
生成vendors.js?f3aaf25de220e214f84e,每次都会覆盖之前生成的资源，方便在某些特殊项目使用。
process.env.NODE_ENV
指的是config/*下文件中的配置。
