环境：vue2.5.2+webpack3.0
使用场景：用vue做活动的时候因为是单页面不同的活动，都要重新vue一遍才可以，这样导致文件内容过多，每次开发的时候光这个流程都要好久，所以想开发成vue一套流程，然后每次有活动只需要建立文件夹然后开发就可以了
优化内容：把原先公用的share.vue,alertmsg.vue和一些公用的js文件提取出来，这样每个活动就不用在复制一遍了，只需要引用文件就可以了。
我的参考资料
https://segmentfault.com/a/1190000006741478
https://segmentfault.com/a/1190000013186820
https://www.cnblogs.com/lvdabao/p/5944420.html
https://www.jianshu.com/p/0a30aca71b16
目录结构
assets 资源
components 公共组件
alertmsg 弹框
HbShare 分享
views 各个页面模块
details 不同活动的页面
home
router
views下面的每一个文件夹是一个活动，不同的活动建立不同的文件夹就可以了
配置：
首先在utils.js中
// glob是webpack安装时依赖的一个第三方模块，还模块允许你使用 *等符号, 例如lib/*.js就是获取lib文件夹下的所有js后缀名的文件
var glob = require('glob')
https://www.jianshu.com/writer#/notebooks/23309900/notes/25227054
```
//获取多级的入口文件
exports.getMultiEntry = function (globPath) {
var entries = {},
basename, tmp, pathname;
glob.sync(globPath).forEach(function (entry) {
// path.basename 提取出用 ‘/' 隔开的path的最后一部分，除第一个参数外其余是需要过滤的字符串
// path.extname 获取文件后缀
basename = path.basename(entry, path.extname(entry));
// slice 从已有的数组中返回选定的元素, -4 倒序选择，即选择最后四个
tmp = entry.split('/').splice(-4);
var pathsrc = tmp[0]+'/'+tmp[1]; //views/planner5
if( tmp[0] == 'src' ){
pathsrc = tmp[1]; //views
}
// console.log(pathsrc)
pathname = pathsrc + '/' + basename; // 正确输出js和html的路径
entries[pathname] = entry;
console.log(pathname+'-----------'+entry);
});
return entries;
}
```
** webpack.base.conf的配置 **
···
var glob = require('glob');
var entries = utils.getMultiEntry('./src/'+config.moduleName+'/**/**/*.js'); // 获得入口js文件
···
删除 ~~entry: {app:'./src/main.js'},~~，取而代之如下：
···
module.exports = {
entry:entries,
}
···
**最后改造webpack.dev.conf.js和webpack.prod.conf.js**
移除原来的HtmlWebpackPlugin
这句文件删除module.exports = merge(baseWebpackConfig, {})
修改成为const devWebpackConfig = merge(baseWebpackConfig, {})
把它作为一个变量们，应该下面的一会会用，本来启动文件的js在utils中，但是webpack3中增加了一个devServer，所以就写在了这个webpack.dev.conf中，下面需要导出这个启动文件
这行代码new Promise((resolve, reject) => {})修改成为module.exports= new Promise((resolve, reject) => {})
增加下面代码
···
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(newHtmlWebpackPlugin(conf))的，但是一个文件中只能有一个module.exports,而且住webpack3中已经有一个了所以这里修改了下*/
devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}
···
**webpack.prod.conf文件**
增加
var entries = utils.getMultiEntry('./src/'+config.moduleName+'/**/**/*.js'); // 获得入口js文件
var chunks = Object.keys(entries);
注释黄色框中的内容，增加红色框中的内容
```
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: chunks,
minChunks: 4 || chunks.length
}),
```
增加代码
```
//构建生成多页面的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));
}
```
现在是配置完成了，接下面就是正常的写代码了，然后还有需要说明的一点是要是想链接到其他的组件中，如果用history现在是不行的。我现在是把他们变成了两个页面这样进行链接。要是其他人又什么好办法可以交流下
网友评论