参考：
https://github.com/bluefox1688/vue-cli-multi-page（参考多页面配置整体思想）
https://github.com/luchanan/vue2.0-multi-page （参考整个文件命名架构）
主要入口配置：
1 . 依赖：glob
npm install glob -D
2 . 在哪使用：
build/utils.js
const glob = require('glob');
//多入口配置
//获取js入口文件
exports.getEntries = function (globPath,type) {
var entries = {},pathname;
var ishtml=type!==undefined?true:false;
/**
* 读取src目录,并进行路径裁剪
*/
glob.sync(globPath).forEach(function (entry) {
/**
* path.basename 提取出用 ‘/' 隔开的path的最后一部分，除第一个参数外其余是需要过滤的字符串
* path.extname 获取文件后缀
*/
// var basename = path.basename(entry, path.extname(entry), 'router.js') // 过滤router.js
// ***************begin***************
// 当然， 你也可以加上模块名称, 即输出如下： { module/main: './src/module/index/main.js', module/test: './src/module/test/test.js' }
// 最终编译输出的文件也在module目录下， 访问路径需要时 localhost:8080/module/index.html
// slice 从已有的数组中返回选定的元素, -3 倒序选择，即选择最后三个
//以ocahost:8080/homeIndex.html这样形式访问
if(ishtml){
//html以模块文件作为输出
//以locahost:8080/views/index.html这样形式访问
/*var tmp = entry.split('/').splice(-3)
var moduleName = tmp.slice(0, 2).join("/");
console.log(moduleName);
entries[moduleName] = entry*/
var tmp = entry.split('/').splice(-3)
var moduleName = tmp.splice(0,2).join("/");
entries[moduleName] = entry
}
else{
//js以模块文件作为输出,比如indx.js
var basename = path.basename(entry, path.extname(entry));
tmp = entry.split('/').splice(-3);
pathname = tmp.splice(1, 1);
entries[pathname] = entry;
}
//以locahost:8080/views/index.html这样形式访问
// var tmp = entry.split('/').splice(-3)
// var moduleName = tmp.slice(1, 2);
// console.log(moduleName);
// entries[moduleName] = entry
});
// console.log(entries);
// 获取的主入口如下： { main: './src/module/index/main.js', test: './src/module/test/test.js' }
return entries;
}
3 . 配置修改：
build/webpack.base.conf.js
//html输出依赖
const HtmlWebpackPlugin = require('html-webpack-plugin')
const entries = utils.getEntries('./src/'+config.moduleName+'/**/*.js'); // 获得入口js文件
module.exports = {
//...
entry: entries,
...
plugins:[] //添加打包输出
}
//读取项目结构中的html页面
const pages = utils.getEntries('./src/'+config.moduleName+'/**/*.html',1);
//循环打包
for (var pathname in pages) {
// 生成html相关配置
var conf = {
filename: pathname + '.html', // html文件输出路径
template: pages[pathname], // 模板路径
inject: true, // js插入位置
minify: {
//压缩设置
//removeComments: true,
//collapseWhitespace: true,
//removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick- reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
};
pathname=pathname.split("/")[1];//去掉views
if (pathname in module.exports.entry) {
conf.inject = 'body';
//如果每个html没有进入这里的话，那么全部js将会插入html
conf.chunks = ['flexible','flexible_css', pathname, 'vendor', 'manifest', 'bootstrap'],
conf.hash = true;
}
module.exports.plugins.push(new HtmlWebpackPlugin(conf));
}
build/webpack.dev.conf.js
module.exports = merge(baseWebpackConfig, {
...
//把原来的输出注释
// new HtmlWebpackPlugin({
// filename: 'index.html',
// template: 'index.html',
// inject: true
// }),
}
build/webpack.pro.conf.js
const webpackConfig = merge(baseWebpackConfig, {
...
//把原来的输出注释并修改为
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// minChunks: function (module) {
// // any required modules inside node_modules are extracted to vendor
// return (
// module.resource &&
// /\.js$/.test(module.resource) &&
// module.resource.indexOf(
// path.join(__dirname, '../node_modules')
// ) === 0
// )
// }
// }),
}
改为
// 提取公共模块
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',// 为公共模块起一个名称
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
// 提取全局依赖的库（主要是base.js中引入的vue, jquery等插件生成放到vuedor.js那里）
var jsReg = /\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0;
// 公共UI库提提取
// todo 这边可进行更精确的匹配
// 提取的样式文件 vendor.[contenthash].css
// var bootstrapUIReg = /bootstrap\.scss$/.test(module.resource);
return (
// module.resource && (jsReg || bootstrapUIReg)
module.resource && jsReg
)
}
}),
开发环境配置修改：
build/dev-server.js
// var uri = 'http://localhost:' + port //注释掉原来的url
var uri = 'http://localhost:' + port + '/'+config.moduleName+'/index.html' // 直接显示页面
console.log('> Listening at ' + uri + '\n')
自定义文件模块名：
config/index.js
module.exports = {
//添加一个变量属性
moduleName:"views",
}
项目结构修改：
webpack
|---build
|---src
|---assets #资源
|---components 组件
|---views #各个页面模块，模块名可以自定义哦！
|---index #一级目录
|---index.html #html页面
|---index.js #html页面入口js
|---app.vue #html页面vue模板
|---login #一级目录
|---index.html #html页面
|---index.js #html页面入口js
|---app.vue #html页面vue模板
......
网友评论