vue多页面应用 webpack配置

更改webpack配置需要重启项目

第一种带注释

module.exports = {
	pages: {
		page1: {
			//文件夹创建安装当前路径创建就可以
			//比如entry 从src下面创建pages,pages里面创建page1
			//pege1里面创建main.js
			//入口文件，相对于多页面应用的main.js，必须
			entry: 'src/pages/page1/main.js',
			//生成应用模板，,省略默认与模块名一致
			template: "public/page1.html",
			//编译后dist目录中输出的文件名字，非必须，
			//省略默认与模块名一致
			filename: "page1.html"
		},
		page2: 'src/pages/page2/main.js'
	}
}

// let path = require("path");
// let HtmlWebpackPlugin = require('html-webpack-plugin');
// module.exports = {
// 	mode: 'development',
// 	entry: {
// 		home: './src/index.js', //home入口
// 		other: './src/index.js' //other入口
// 	},
// 	output: {
// 		//动态输出多个文件，对应入口的名字，生成到dist
// 		filename: '[name].js',
// 		path: path.resolve(__dirname, 'dist')
// 	},
// 	plugins: [
// 		new HtmlWebpackPlugin({
// 			template: './src/index.html', //用这个模板
// 			filename: 'home.html', //最后生成的文件名字\
// 			chunks: ['home']
// 		}),
// 		new HtmlWebpackPlugin({ //这个插件就是生成html文件的
// 			template: './src/index.html', //用这个模板
// 			filename: 'other.html',//最后生成的文件名字
// 			//当前html的引入的homejs 和 otherjs
// 			chunks: ['home', 'other']
// 		}),
// 	]
// }

// module.exports = {
// 	pages: {
// 		console: {
// 			// 应用入口配置，相当于单页面应用的main.js，必需项
// 			entry: 'src/modules/console/console.js',

// 			// 应用的模版，相当于单页面应用的public/index.html，可选项，省略时默认与模块名一致
// 			template: 'public/console.html',

// 			// 编译后在dist目录的输出文件名，可选项，省略时默认与模块名一致
// 			filename: 'console.html',

// 			// 标题，可选项，一般情况不使用，通常是在路由切换时设置title
// 			// 需要注意的是使用title属性template 中的 title 标签需要是 <title><%= 		htmlWebpackPlugin.options.title %></title>
// 			title: 'console page',
// 			// 当前打包的html里面引入的包含的模块，可选项
// 			chunks: ['console']
// 		},
// 		// 只有entry属性时，直接用字符串表示模块入口
// 		client: 'src/modules/client/client.js'
// 	}
// }

第二种

const glob = require("glob");

function getEntry(url) {
  let entrys = {};
  glob.sync(url).forEach((item) => {
    let urlArr = item
      .split("/")
      .splice(-2)
      .map((item) => item.split(".")[0]);
    entrys[urlArr[1]] = {
      entry: "src/pages/" + urlArr[1] + "/" + "main.js",
      template: "public/" + urlArr[1] + ".html",
      filename: urlArr[1] + ".html",
      title: urlArr[1],  
    };
  });
  return entrys;
}
let pages = getEntry("./public/*.html");

module.exports = {
  // devServer: {
  //   proxy: {
  //     "/api": {
  //       target: "http://localhost:8088",
  //       changeOrigin: true,
  //       pathRewrite: {
  //         "^/api": "/",
  //       },
  //     },
  //   },
  // },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/global.scss";`,
      },
    },
  },
  publicPath: "./",
  pages: pages,
};

第三种

找不到当前页面自动去首页

let glob = require('glob')

//配置pages多页面获取当前文件夹下的html和js
function getEntry(globPath) {
    let entries = {},
        tmp, htmls = {};

    // 读取src/pages/**/底下所有的html文件
    glob.sync(globPath + 'html').forEach(function (entry) {
        tmp = entry.split('/').splice(-3);
        htmls[tmp[1]] = entry
    })

    // 读取src/pages/**/底下所有的js文件
    glob.sync(globPath + 'js').forEach(function (entry) {
        tmp = entry.split('/').splice(-3);
        entries[tmp[1]] = {
            entry,
            template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', //  当前目录没有有html则以共用的public/index.html作为模板
            filename: tmp[1] + '.html' //  以文件夹名称.html作为访问地址
        };
    });
    console.log(entries)
    return entries;
}
let htmls = getEntry('./src/pages/**/*.');

module.exports = {
    pages: htmls,
    publicPath: './', //  解决打包之后静态文件路径404的问题
    outputDir: 'output', //  打包后的文件夹名称，默认dist
    devServer: {
        open: true, //  npm run serve 自动打开浏览器
        index: '/index.html', //  默认启动页面
        hot: true
    },
  chainWebpack: config => {
  config.module.rule('md')
   .test(/\.md/)
   .use('vue-loader')
   .loader('vue-loader')
   .end()
   .use('vue-markdown-loader')
   .loader('vue-markdown-loader/lib/markdown-compiler')
   .options({
    raw: true
   })
 }
}